CSS Firefox 4 必需的输入表单红色边框/轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3809146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firefox 4 Required input form RED border/outline
提问by matmancini
I have recently developed an HTML5 jQuery plugin and I'm having trouble removing the red border on required fields in FF4 beta.
我最近开发了一个 HTML5 jQuery 插件，但在 FF4 beta 中删除必填字段上的红色边框时遇到了问题。
I noticed that FF applies this border/outline in required fields and removes it when value is set. The problem is that I am using the value attribute to emulate the placeholder attr in older browsers. Therefore I need all inputs with this feature to not show the red line.
我注意到 FF 在必填字段中应用此边框/轮廓并在设置值时将其删除。问题是我使用 value 属性来模拟旧浏览器中的占位符 attr。因此，我需要具有此功能的所有输入不显示红线。
You can see the problem in the demo page of the plugin here
回答by jason
There's some new pseudo selectors for some of the new HTML5 form features available to you in CSS. You're probably looking for :invalid. The following are all from the MDC Firefox 4 docs:
有一些新的伪选择器，用于在 CSS 中为您提供一些新的 HTML5 表单功能。您可能正在寻找:invalid. 以下全部来自MDC Firefox 4 文档：
The
:invalidCSS pseudo-class is applied automatically to elements whose contents fail to validate according to the input's type settingThe
:-moz-submit-invalidpseudo-class is applied to the submit button on form fields when one or more form fields doesn't validate.The
:requiredpseudo-class is now automatically applied to fields that specify the required attribute; the:optionalpseudo-class is applied to all other fields.The
:-moz-placeholderpseudo-class has been added, to let you style placeholder text in form fields.The
:-moz-focusringpseudo-selector lets you specify the appearance of an element when Gecko believes the element should have a focus indication rendered.
的
:invalidCSS伪类自动应用于其内容无法验证根据输入的类型设定元件:-moz-submit-invalid当一个或多个表单域未通过验证时，伪类应用于表单域上的提交按钮。的
:required伪类现在被自动应用到指定所需的属性字段; 该:optional伪类适用于所有其它领域。该
:-moz-placeholder伪类已经被添加，让你在表单字段的样式占位符文本。:-moz-focusring当 Gecko 认为元素应该呈现焦点指示时，伪选择器允许您指定元素的外观。
回答by WVDominick
To be more specific you need to apply that style to the input control.
更具体地说，您需要将该样式应用于输入控件。
input:invalid {
box-shadow: none;
}
回答by Mo.
use this code as Quick and simple solution
使用此代码作为快速简单的解决方案
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}
Reference:- https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
参考：- https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
回答by Anoop Velluva
Please try this,
请试试这个，
$("form").attr("novalidate",true);
$("form").attr("novalidate",true);
for your form in your global .js file or in header section.
用于您的全局 .js 文件或标题部分中的表单。
回答by Andrew Luca
Wrap your required inputinto a formwith novalidateattribute
将您的 required 包装input成formwithnovalidate属性
<form novalidate>
<input required>
</form>
