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

Question

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 ?

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

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

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

Answer 3

Try:

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

Answer 4

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