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

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

HTML

<form>

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

<input type="submit" />

</form>

注意:您必须使用HTML5浏览器(例如Google Chrome或FireFox)查看此内容。

回答:

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

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

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

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

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

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

以上是 覆盖CSS以进行html5表单验证/所需的弹出窗口 的全部内容, 来源链接: utcz.com/qa/404665.html

回到顶部