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

Question

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

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

您可以在plugin here

的演示页面中看到问题

Answer 1

对于CSS中可用的一些新的HTML5表单功能，有一些新的伪选择器。你可能正在寻找:invalid。以下全部来自MDC Firefox 4 docs：

• :invalid CSS伪类自动应用于根据输入的类型设置无法验证内容的元素

• :-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/:invalid

Answer 4

将您所需的input包裹在form novalidate属性

中

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

Answer 5

请试试这个，

<强> $（＆＃34;形式＆＃34）。ATTR（＆＃34; NOVALIDATE＆＃34;，TRUE）;

表示您的全局.js文件或标题部分中的表单。