覆盖 html5 表单验证/所需弹出窗口的 css [英] override css for html5 form validation/required popup

问题描述

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

How can I override the default popup for a required field on a HTML5 form?

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

Example: http://jsfiddle.net/uKZGp/ (make sure you click the submit button to see the popup)

HTML

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

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

NOTE: You must view this with a HTML5 browser like Google Chrome or FireFox.

此链接不能解决我的问题，但它可能会让某人跳出框框思考:

This link doesn't solve my question but it might make someone think outside of the box:

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

推荐答案

仅使用 HTML5/CSS3 无法更改验证样式.

It's impossible to change the validation style with only HTML5/CSS3.

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

It's part of the browser. The only attribute I figured out to change is the error message by using this example:

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

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

But, as shown in this example : http://jsfiddle.net/trixta/qTV3g/, you can override the panel style by using jQuery. This is not a plugin, it's a core functionality, uses a DOM lib called Webshims and, of course, some CSS to style the popups.

我在这个标题为 Improve form validation error panel 的错误帖子中发现了一个非常有用的例子用户界面.

I found that very useful example in this bug post titled Improve form validation error panel UI.

我认为这是您能找到的最佳解决方案，也是覆盖基本(丑陋)错误面板的唯一方法.

I think this is the best solution you can find and only way to override the basic (ugly) error panel.

问候.

这篇关于覆盖 html5 表单验证/所需弹出窗口的 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！