问题

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.

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 ?

回答1:

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...

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

Hope that helps!

EDIT

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

EDIT after acceptance:

Summary of examples at OP's request (note the first two are only designed for FF4 - not Chrome)

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

回答2:

As of Firefox 26, the actual CSS used to identify invalid required fields is as follows (comes from forms.css):

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

To replicate in other browsers, I use:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

I played around with the pixel settings but I never would have guessed the 1.5px without looking at moz source.

To disable it, you can use:

input:invalid {
    box-shadow: none;
}

回答3:

Here is a very easy solution that worked for me. I basically changed the ugly red into a very nice blue, which is the standard color for non-required fields, and a web convention:

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

回答4:

This worked well for me:

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

回答5:

Try:

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

回答6:

Please try this,

$("form").attr("novalidate",true);

for your form in your global .js file or in header section.

来源：https://stackoverflow.com/questions/5939341/firefox-4-is-there-a-way-to-remove-the-red-border-in-a-required-form-input

标签

attributes

border

firefox4

required

Firefox 4 : Is there a way to remove the red border in a required form input?

问题