Firefox 4 需要输入表单红色边框/轮廓

Question

最近，我开发了一个HTML5 jQuery插件，但在FF4 beta中无法去除必填字段上的红色边框。

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

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

- matmancini

Answer 1

在CSS中，有一些新的伪类可以用于一些HTML5表单功能。你可能在寻找:invalid。以下来自MDC Firefox 4文档：

• 自动应用:invalid CSS伪类于那些根据输入类型不符合验证规则的元素。

• 当一个或多个表单字段未通过验证时，将应用:-moz-submit-invalid伪类于表单提交按钮。

• 现在会自动应用:required伪类于指定了required属性的元素，而:optional伪类则应用于所有其他字段。

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

• :-moz-focusring伪选择器可让您指定一个元素在Gecko认为该元素应该具有聚焦指示时的外观。

- jason

---

我将 -moz-mox-shadow 属性设置为 'none'。 - matmancini

你应该将他的答案视为“答案”并给他一个赞，这就是这个网站的运作方式。这样做将是非常感谢 :D - Ammi J Embry

还有一个 :-moz-ui-invalid 伪类，它适用于 :invalid 的某些情况。Gecko 使用它，并使用 box-shadow 属性应用红色发光效果。 - S. Esteves

Answer 2

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

input:invalid {
    box-shadow: none;
}

- WVDominick

---

没事了，现在只需要使用简单的box-shadow:none就可以了。很抱歉让你费心了。 - rgin

同时添加文本区域。input:invalid, textarea:invalid { box-shadow: none; } - Mina Luke

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

- Mo.

---

对我而言，这个方法在Firefox中去除（不再显示）无效输入框周围的红色边框非常有效。谢谢！ - B R

第三个元素是让我移除了红色框的。 - Andy Swift

@Andrew Swift 使用它们的全部功能以确保兼容性。 - Mo.

Answer 4

将所需的input包装到带有novalidate属性的form中。

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

- iamandrewluca

Answer 5

请尝试这个：

$("form").attr("novalidate",true);

在您的全局.js文件或头部区域中为您的表单添加代码。

- Anoop Velluva