Firefox 4所需的输入形式为RED边框/轮廓

Question

我最近开发了一个HTML5 jQuery插件,我在删除FF4 beta中必填字段的红色边框时遇到问题.

我注意到FF在必填字段中应用此边框/轮廓,并在设置值时将其删除.问题是我使用value属性来模拟旧浏览器中的占位符attr.因此,我需要具有此功能的所有输入不显示红线.

您可以在此处的插件的演示页面中查看问题

Answer 1

对于CSS中可用的一些新的HTML5表单功能,有一些新的伪选择器.你可能正在寻找:invalid.以下均来自MDC Firefox 4文档:

• 的:invalidCSS伪类自动应用于其内容不能根据输入的类型设置,以验证元件

• :-moz-submit-invalid当一个或多个表单字段未验证时,伪类将应用于表单字段上的提交按钮.

• 的:required 伪类现在被自动应用到指定所需的属性字段; 该 :optional伪类适用于所有其它领域.

• 该 :-moz-placeholder伪类已经被添加,让你在表单字段的样式占位符文本.

• :-moz-focusring当Gecko认为元素应该呈现焦点指示时,伪选择器允许您指定元素的外观.

Answer 2

更具体地说,您需要将该样式应用于输入控件.

input:invalid {
    box-shadow: none;
}

Answer 3

使用此代码作为快速简单的解决方案

: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/:无效