Firefox 4：有没有办法删除所需表单输入中的红色边框？

Question

当在表单字段中定义 required 时，Firefox 4 会自动显示该元素的红色边框，甚至在用户点击提交按钮之前也是如此。

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

我认为这对用户来说是令人不安的，因为他/她一开始就没有犯错误。

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

我从新的伪选择器中查看了 :required 和 :invalid ，但更改是在验证之前和之后进行的。 （来自 Firefox 4 必需的输入表单红色边框/轮廓）

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

Answer 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）

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

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

我使用了像素设置，但我永远不会猜到 1.5px无需查看moz源代码。

要禁用它，您可以使用：

input:invalid {
    box-shadow: none;
}

Answer 3

尝试：

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

Answer 4

这是一个对我有用的非常简单的解决方案。我基本上将丑陋的红色更改为非常漂亮的蓝色，这是非必填字段的标准颜色，也是网络约定：

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

Answer 5

这对我来说效果很好：

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

Answer 6

请尝试这个，

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

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

Answer 7

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

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

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