火狐4：有没有办法去除所需表单输入的红色边框？ [英] Firefox 4 : Is there a way to remove the red border in a required form input?

问题描述

当需要在表单字段定义，火狐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 />

我觉得这是令人不安的用户，因为他/她asn't之初所犯的错误。

I think this is disturbing for the user as he/she asn't made mistakes at the beginning.

我wnat隐藏的初始状态红色边框，但当用户点击发送按钮显示它是否有需要为缺少标领域

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.

我看了看：需要和：无效来自新的伪选择器，但变动对于之前和验证后。 （从<一个href=\"http://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline\">Firefox 4必需的输入形式的红色边框/轮廓）

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

或类似的东西...

BUT 因为FF4决定来验证您的占位符文本（不知道为什么......）在小提琴的解决方案（小哈克 - 使用重要）是必需的。

BUT since FF4 decides to validate your placeholder text (no idea why...) the solution in the fiddle (little hacky - uses !important) is required.

希望帮助！

修改

卫生署!! - 我觉得好无聊的。我已经更新了我的小提琴： http://jsfiddle.net/c5aTe/2/ - 您可以使用：聚焦伪类来保持风格，如果有效，而用户键入的元素。这仍然会以红色突出显示，如果内容是无效的，当项目失去焦点，但我觉得只有这么多，你可以用设计的行为做...

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)

1. 修正了FF验证您的占位符文本： http://jsfiddle.net/c5aTe/


2. 修正了FF验证您键入： http://jsfiddle.net/c5aTe/2


3. JS​​解决方案切换风格/验证： http://jsfiddle.net/c5aTe/4

1. Fix for FF validating your place holder text: http://jsfiddle.net/c5aTe/
2. Fix for FF validating as you type: http://jsfiddle.net/c5aTe/2
3. JS solution toggling styles/validation: http://jsfiddle.net/c5aTe/4

这篇关于火狐4：有没有办法去除所需表单输入的红色边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！