覆盖css为html5表单验证/所需的弹出窗口

前端之家收集整理的这篇文章主要介绍了覆盖css为html5表单验证/所需的弹出窗口前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何覆盖HTML5表单上必填字段的默认弹出窗口?

示例:http://jsfiddle.net/uKZGp/(确保您单击提交按钮以查看弹出窗口)

HTML

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

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

这个链接不能解决我的问题,但它可能会让人想起盒子:

> http://www.the-art-of-web.com/html/html5-form-validation/
> http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

解决方法

只有HTML5 / CSS3不可能改变验证风格。

它是浏览器的一部分。我想要改变的唯一属性错误消息通过使用这个例子:

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

但是,如此示例所示:http://jsfiddle.net/trixta/qTV3g/,您可以通过使用jQuery覆盖面板样式。这不是一个插件,它是一个核心功能,使用一个DOM库名为Webshims,当然,一些CSS风格的弹出窗口。

我发现这个非常有用的例子在这个bug post题为改进表单验证错误面板UI。

我认为这是最好的解决方案,你可以找到,只有方式来覆盖基本(丑陋)错误面板。

问候。

猜你在找的CSS相关文章