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

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

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

Try:

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