使用 HTML/CSS 樣式化驗證錯誤消息

Question

我試圖自定義驗證錯誤消息作為 CSS/HTML 挑戰的一部分，因此我無法在其上使用 JavaScript。 基本上我需要它看起來像這張圖片

我的代碼如下。
HTML

  <p> It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
  <form action="php">
    <div class="info">
      <input type="email"
             placeholder="Enter Email Adress Here"
             required enter code hereoninvalid="this.setCustomValidity('Please enter a valid email address')"
             onvalid="this.setCustomValidity('')">
      <button type="submit">Get Started For Free</button>
    </div>
  </form>
</div>

和 CSS

.sign input{
    border-radius: 25px;
    width: 500px;
    height: 45px;
    text-align: center;
    margin-right: 30px;
}

編碼仍然很新，因此非常感謝您的幫助:)

Answer 1

您可以嘗試在CSS 偽元素(:before /:after) 中添加驗證消息，並將其樣式設置為相對於輸入。

input {
  position : relative 
}
    
input::after{ 
      content: "Your validation message"
      position: absolute;
      bottom: -8px;
      //add any top, left, right, bottom css styles to it to get the desired position
    }