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

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