一尘不染

覆盖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)查看此内容。


阅读 365

收藏
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