attributes - 火狐4 : Is there a way to remove the red border in a required form input?

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)

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

Answer 1

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

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

或者类似的东西...

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

编辑

Doh!! - 我觉得自己很傻。我更新了我的 fiddle :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