覆盖CSS以进行html5表单验证/所需的弹出窗口

小编典典

html

如何覆盖HTML5表单上必填字段的默认弹出窗口？

HTML

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

注意：您必须使用HTML5浏览器（例如Google Chrome或FireFox）查看此内容。

阅读 400

2020-05-10

共1个答案

小编典典

仅使用HTML5 / CSS3更改验证样式是不可能的。

它是浏览器的一部分。我发现要更改的唯一属性是使用以下示例的错误消息：

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

但是，如本例所示：http : //jsfiddle.net/trixta/qTV3g/，您可以使用jQuery覆盖面板样式。这不是插件，而是核心功能，使用称为Webshims的DOM库，当然还使用一些CSS设置弹出窗口的样式。

我在标题为的错误文章中发现了一个非常有用的示例Improve form validation error panel UI。

我认为这是您可以找到的最佳解决方案，并且是覆盖基本（难看）错误面板的唯一方法。

2020-05-10