Firefox 4：有没有办法去掉必填表单输入框中的红色边框？

Question

当表单字段中定义了required属性时，甚至在用户点击提交按钮之前，Firefox 4会自动将该元素显示为红色边框。

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

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

我想要在初始状态下隐藏那个红色边框，但是如果有标记为必填的字段缺失时，在用户点击发送按钮时显示它。

我查看了新伪选择器:required和:invalid，但更改是在验证之前和之后进行的。(来自Firefox 4 Required input form RED border/outline)

是否有办法在用户提交表单之前禁用红色边框，并在存在缺少字段时显示它？

- Cyril N.

---

轮廓怎么样：0;？ - Ace

Answer 1

这有点棘手，但我设置了这个示例：http://jsfiddle.net/c5aTe/，它对我有效。基本上，诀窍似乎是绕过无效的占位文本。否则，您应该能够做到这一点：

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

或类似的东西...

但是由于FF4决定验证您的占位符文本（不知道为什么...），fiddle中的解决方案（有点hacky-使用!important）是必需的。

编辑

糟糕！！ - 我感到很傻。我更新了我的fiddle：http://jsfiddle.net/c5aTe/2/ - 您可以使用:focus伪类来保持元素在用户输入时的样式，这将使内容无效时仍会以红色突出显示，但我认为只能做这么多与设计行为...

希望对您有所帮助 :)

---

接受后的编辑：

根据OP的要求总结的示例（请注意，前两个示例仅适用于FF4-而不适用于Chrome）

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

- Stuart Burrows

---

取得了很大的突破，但是当用户点击输入框时，“无效”的错误似乎会显示出来 => 当输入框为空时，在实际输入之前。但也许我想要的是FF4中无法解决的错误 :/ - Cyril N.

在做早餐的时候得到了一些灵感 - 已添加以上！ - Stuart Burrows

聪明！ :p 但是如果你看一下，你有原始状态的阴影和无效状态的框阴影。两者都显示出来了。我开始相信这是Mozilla的一个错误，他们没有考虑到初始状态。如果这是正确的，没有人添加一个完全可行的方法来做到这一点，我不会接受你的答案，但我会给你赏金（希望这是可能的，如果不是，我会接受你的答案）。你值得拥有它 :) 谢谢你的帮助！ - Cyril N.

（我只能在56分钟后授予奖金...你必须等待;）） - Cyril N.

谢谢你的建议，我已经将它添加到我的答案中了。 :) - Stuart Burrows

Answer 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;
}

- Dan

---

小细节：对于那些尝试过这样做的人，应该是 :not(output):-moz-ui-invalid 而不是 input:not(output):-moz-ui-invalid。 - Skoua

你是一个绝对的传奇。 - abejdaniels

Answer 3

尝试:

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

- Andriy

---

这应该是被接受的答案。Firefox（以及我测试过的大多数浏览器）在用户尚未输入任何内容时不会将输入字段标记为无效。这不应该是一个问题。我怀疑提问者和我一样，在单页应用程序中重复使用表单。重置表单会清除所有无效输入的红色边框。 - Daniel Wu

我正在使用一个初始禁用的选项作为占位符，以强制用户选择一个选项。".reset()" 可以避免这种情况并自动选择一个有效的选项 :S - David Gras

Answer 4

这是一个非常简单的解决方案，对我很有效。我基本上将丑陋的红色改成了非常漂亮的蓝色，这是非必填字段的标准颜色和网络惯例：

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

- Randy Greencorn

Answer 5

这对我很有效：

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

- WVDominick

---

问题在于验证后，盒子阴影仍保持为“无”状态，用户没有任何线索知道错误发生的位置。我希望在表单正常状态下不显示红色边框，但如果用户提交/模糊表单时存在错误，则显示它。 - Cyril N.

Answer 6

请试一试这个，

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

将代码放入全局 .js 文件或页头部分中以供您的表单使用。

- Anoop Velluva

Answer 7

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

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

这样，输入字段一开始就有漂亮的蓝色轮廓，但一旦用户输入字符，它就被设置为必填项（因此，如果您输入一个字符然后按退格键，红色边框就会出现）。在这种情况下，用户可以跳过输入，因此如果您这样做，请确保放置后端验证。

- kylew