[英]Styling validation error messages using HTML/CSS
Im trying to customize a validation error message as part of a CSS/HTML challenge, so I am unable to use JavaScript on it.我试图自定义验证错误消息作为 CSS/HTML 挑战的一部分,因此我无法在其上使用 JavaScript。 Basically I need it to look like this image基本上我需要它看起来像这张图片
My code is as follows.我的代码如下。
HTML 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>
And CSS和 CSS
.sign input{
border-radius: 25px;
width: 500px;
height: 45px;
text-align: center;
margin-right: 30px;
}
Still very new to coding so help is much appreciated:)编码仍然很新,因此非常感谢您的帮助:)
You can try and add the validation message in a CSS pseudo element (:before /:after) and style it relatively to the input.您可以尝试在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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.