html - 使用 HTML/CSS 样式化验证错误消息
问题描述
我试图自定义验证错误消息作为 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;
}
编码仍然很新,因此非常感谢您的帮助:)
解决方案
您可以尝试在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
}
推荐阅读
- angular - 如何引用 Leaflet.draw 中已删除的图层?
- javascript - 输入明文时出现错误“文本字符串必须在文本中呈现...”
- r - 如何在r中选择并重复数据框中的多行
- javascript - 当名称字段中存在任何重复值时,无法形成结构和更新标志值
- c++ - 这个函数是返回一个正确的 R 值引用还是返回一个副本?
- excel - How to fix this "ambiguous name detected Worksheet_Change"?
- openedge - FILL-IN基本组件中如何避免千位分隔符
- sql - 在 SQL Server Management Studio (SSMS) 中禁用空白文本的副本
- javascript - ag-grid:key.forEach 在调整列大小时不是函数控制台错误
- nvidia-jetson - Jetson nano 模块与生产开发人员