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

Question

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

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

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

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

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

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

Answer 1

这有点棘手，但我已经设置了这个例子：http://jsfiddle.net/c5aTe/，这对我有用。基本上这个技巧似乎是让占位符文本无效。否则你应该能够这样做：

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

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

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

希望有所帮助！

编辑

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

HTH :)

---

EDIT after acceptance:

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

我玩了像素设置，但我从来没有在没有看过moz源的情况下猜到1.5px。

要禁用它，您可以使用：

input:invalid {
    box-shadow: none;
}

Answer 3

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

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

Answer 4

这对我很有用：

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

Answer 5

请试试这个，

$（ “形式”）ATTR（ “NOVALIDATE”，真）。

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

Answer 6

尝试：

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