Firefox 4需要的inputforms红色边框/轮廓

我最近开发了一个HTML5 jQuery插件，并且在FF4testing版中的所需字段中删除了红色边框。

我注意到FF将这个边框/轮廓应用于必填字段，并在设置值时将其删除。 问题是我正在使用value属性来模拟旧版浏览器中的占位符attr。 因此，我需要使用此function的所有input不显示红线。

你可以在这个插件的演示页面看到问题

Answer 1

有一些新的伪select器可用于您在CSS中使用的一些新的HTML5表单function。 您可能正在寻找:invalid 。 以下全部来自MDC Firefox 4文档 ：

• :invalid CSS伪类是根据input的types设置自动应用到内容无法validation的元素

• 当一个或多个表单字段不validation时， :-moz-submit-invalid伪类应用于表单字段上的提交button。

• :required伪类现在自动应用于指定必需属性的字段; :optional伪类应用于所有其他字段。

• :-moz-placeholder伪类已被添加，让您在表单字段中设置样式占位符文本。

• 这个:-moz-focusring伪select器可以让你在Gecko认为元素应该有一个焦点指示的时候指定元素的外观。

Answer 2

更具体地说，您需要将该样式应用于input控件。

 input:invalid { box-shadow: none; } 

Answer 3

使用此代码作为快速和简单的解决scheme

 :invalid { box-shadow: none; } :-moz-submit-invalid { box-shadow: none; } :-moz-ui-invalid { box-shadow:none; } 

参考： – https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

Answer 4

请试试这个，

$（ “forms”）ATTR（ “NOVALIDATE”，真）。

在您的全球.js文件或标题部分的表单。

Answer 5

把你需要的input包装成一个没有validation属性的form

 <form novalidate> <input required> </form>