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

Question

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

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

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

我想隐藏初始状态的红色边框,但是当用户按下发送按钮时显示它,如果缺少标记为必需的字段.

我看了看:required,并:invalid从新的伪选择,但变化是之前和之后的验证.(来自Firefox 4所需的输入形式RED边框/大纲)

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

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 :)

接受后编辑:

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