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.

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