【问题标题】：Firefox 4 : Is there a way to remove the red border in a required form input?Firefox 4：有没有办法删除所需表单输入中的红色边框？
【发布时间】：2011-08-21 19:30:47
【问题描述】：

当在表单域中定义了 required 时，Firefox 4 会自动在该元素上显示一个红色边框，甚至在用户点击提交按钮之前。

<input type="text" name="example" value="This is an example" required />

我认为这让用户感到不安，因为他/她一开始并没有犯错。

我想隐藏初始状态的红色边框，但如果缺少标记为必需的字段，则在用户点击发送按钮时显示它。

我从新的伪选择器中查看了:required 和:invalid，但更改是针对验证之前和之后。（来自Firefox 4 Required input form RED border/outline）

有没有办法在用户提交表单之前禁用红色边框，如果缺少某些字段则显示它？

【问题讨论】：

outline:0 怎么样； ?

标签： attributes border firefox4 required

【解决方案1】：

这有点棘手，但我已经设置了这个例子：http://jsfiddle.net/c5aTe/ 这对我有用。基本上，诀窍似乎是绕过无效的占位符文本。否则你应该可以这样做：

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

或类似的东西......

但是因为 FF4 决定验证您的占位符文本（不知道为什么...），所以需要小提琴中的解决方案（小技巧 - 使用 !important）。

希望有帮助！

编辑

Doh!! - 我觉得自己很傻。我已经更新了我的小提琴：http://jsfiddle.net/c5aTe/2/ - 您可以使用 :focus 伪类来保持元素样式，就好像在用户键入时有效一样。如果在项目失去焦点时内容无效，这仍会以红色突出显示，但我认为您只能对设计的行为做很多事情......

HTH :)

接受后编辑：

应 OP 的要求提供示例摘要（注意前两个仅适用于 FF4 - 不是 Chrome）

修复 FF 验证占位符文本：http://jsfiddle.net/c5aTe/
修复 FF 在您键入时验证的问题：http://jsfiddle.net/c5aTe/2
JS 解决方案切换样式/验证：http://jsfiddle.net/c5aTe/4

【讨论】：

伟大的突破，但是当用户点击输入时似乎显示“无效”错误=>当输入为空时，在他实际写东西之前。但也许我想要的是 FF4 中无法解决的错误：/
但是 +1 是为了限制可怕的红框阴影 :)
不要认为你能做到这一点，因为奇怪的是，它几乎太聪明并且可以即时验证。您可能会很聪明地使用一些额外的 javascript 在提交时从表单中添加或删除一个类。然后，您可以根据该类是否存在覆盖任何验证突出显示。这样做的好处是它仍在使用本机验证，不太好需要额外的 js...：|
在做早餐时获得了一些灵感 - 添加在上面！
聪明！ :p 但是如果你看一下，你有原始状态的阴影和无效状态的盒子阴影。它们都显示出来了。我开始相信这是Mozilla的错误，他们没有考虑初始状态。如果这是正确的并且没有其他人添加一个完全可行的方法来做到这一点，我不会接受你的回答，但我会给你赏金（希望这是可能的，如果没有，我会接受你的回答）。你应得的 :) 谢谢你的帮助！

【解决方案2】：

从 Firefox 26 开始，用于识别无效必填字段的实际 CSS 如下（来自 forms.css）：

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

要在其他浏览器中复制，我使用：

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

我玩弄了像素设置，但如果不查看 moz 源，我永远不会猜到 1.5px。

要禁用它，您可以使用：

input:invalid {
    box-shadow: none;
}

【讨论】：

小精度：应该是:not(output):-moz-ui-invalid 而不是input:not(output):-moz-ui-invalid 对于那些尝试过喜欢这个的人。
你是一个绝对的传奇。

【解决方案3】：

试试：

document.getElementById('myform').reset();

【讨论】：

这应该是公认的答案。当用户甚至没有输入任何内容时，Firefox（以及我测试过的大多数浏览器）都不会将输入字段标记为无效。这不应该是一个问题。我怀疑提问者正在和我做同样的事情，在单页应用程序中重用表单。重置表单会清除所有无效输入的红色边框。
我使用初始禁用选项作为占位符来强制用户选择一个选项。 ".reset()" 只是避开这个并自动选择一个有效的选项：S

【解决方案4】：

这是一个对我有用的非常简单的解决方案。我基本上把难看的红色变成了非常漂亮的蓝色，这是非必填字段的标准颜色，也是一种网络约定：

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

【讨论】：

【解决方案5】：

这对我很有效：

input:invalid {
     -moz-box-shadow: none;
}

【讨论】：

这里的问题是，验证后，盒子阴影仍然没有，用户不知道错误发生在哪里。我想要的是不在表单的正常状态下显示红色边框，而是在用户提交/模糊表单时显示它，如果有错误。

【解决方案6】：

请试试这个，

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

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

【讨论】：

【解决方案7】：

我发现至少大部分可以解决问题的方法是：

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

这样，输入字段以漂亮的蓝色轮廓开始，但是一旦用户输入一个字符，它就会被设置为必需（所以如果你输入一个字符然后退格，红色边框就在那里）。在这种情况下，用户可能会跳过输入，因此请确保在执行此操作时进行后端验证。

【讨论】：