Firefox 4:有没有办法删除所需表单输入中的红色边框? [英] Firefox 4 : Is there a way to remove the red border in a required form input?
问题描述
当在表单域中定义了 required 时，Firefox 4 会自动在该元素上显示一个红色边框，甚至在用户点击提交按钮之前.
When required is defined in a form field, Firefox 4 automatically shows a red border to this element, even BEFORE the user hits the submit button.
<input type="text" name="example" value="This is an example" required />
我认为这让用户感到不安，因为他/她一开始并没有犯错.
I think this is disturbing for the user as he/she asn't made mistakes at the beginning.
我想隐藏初始状态的红色边框，但如果缺少标记为必需的字段，则在用户点击发送按钮时显示它.
I wnat to hide that red border for the initial state, but show it when the user hits the send button if there is a missing field marked as required.
我从新的伪选择器中查看了 :required 和 :invalid，但更改是针对验证之前和之后.(来自 Firefox 4 必需的输入表单 RED 边框/轮廓)
I looked at :required and :invalid from new pseudo selector, but the changes are for before AND after the validation. (from Firefox 4 Required input form RED border/outline)
有没有办法在用户提交表单之前禁用红色边框，如果缺少某些字段则显示它?
Is there a way to disable the red border before the user submits the form, and show it if there is some missing fields ?
推荐答案
这有点棘手，但我已经设置了这个例子:http://jsfiddle.net/c5aTe/ 这对我有用.基本上，诀窍似乎是绕过无效的占位符文本.否则你应该可以这样做:
This was a little tricky but I've set up this exmaple: http://jsfiddle.net/c5aTe/ which is working for me. Basically the trick seems to be getting around having placeholder text which is invalid. Otherwise you should be able do this:
input:required {
box-shadow:none;
}
input:invalid {
box-shadow:0 0 3px red;
}
或类似的东西......
or something similar...
但是，因为 FF4 决定验证您的占位符文本(不知道为什么...)，所以需要小提琴中的解决方案(小技巧 - 使用 !important).
BUT since FF4 decides to validate your placeholder text (no idea why...) the solution in the fiddle (little hacky - uses !important) is required.
希望有帮助！
编辑
Doh!! - 我觉得自己很傻.我已经更新了我的小提琴:http://jsfiddle.net/c5aTe/2/ - 你可以使用 :focus 伪类，以在用户键入时保持元素样式好像有效.如果在项目失去焦点时内容无效，这仍会以红色突出显示，但我认为您可以对设计的行为做很多事情......
Doh!! - I feel well silly. I've updated my fiddle: http://jsfiddle.net/c5aTe/2/ - you can use the :focus pseudo class to keep the element styled as if valid while the user is typing. This will still highlight in red if the content is invalid when the item loses focus but I think there is only so much you can do with the designed behaviour...
HTH :)
应 OP 的要求提供示例摘要(注意前两个仅适用于 FF4 - 不是 Chrome)
Summary of examples at OP's request (note the first two are only designed for FF4 - not Chrome)
- 修复 FF 验证占位符文本:http://jsfiddle.net/c5aTe/
- 修复 FF 在您键入时验证的问题:http://jsfiddle.net/c5aTe/2
- 切换样式/验证的 JS 解决方案:http://jsfiddle.net/c5aTe/4
这篇关于Firefox 4:有没有办法删除所需表单输入中的红色边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
