HTML5自定义验证演示文稿

Question

HTML5提供自动弹出验证消息。

如何删除此弹出窗口并显示相关字段旁边的消息？

Answer 1

弹出验证消息的实际格式是特定于浏览器的，因此您不会找到跨浏览器的纯HTML方式来更改内置验证消息的显示方式。

如果您愿意使用jQuery，请考虑使用类似jQuery Validation插件的内容，仅举几个例子。

如果您需要纯HTML / CSS，那么您的选择非常有限。一些浏览器（基于Webkit的浏览器）将允许使用浏览器特定的CSS自定义弹出框，如本文所述：How do you style the HTML5 form validation messages?

虽然它不控制验证弹出窗口，但输入本身可以使用:valid和:invalid CSS伪类进行样式设置。例如：

input:valid {
    background-color: #FFFFFF;
}
input:invalid {
    background-color: red;
}