What CSS is used by browsers for styling invalid <input type=“email”>s?

Question

OK, so in HTML5 browsers you can have:

When the email is n

Answer 1

Depends on the browser. This should cover your bases:

input:invalid, input:-moz-ui-invalid {
    border:0;
    outline:none;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

Test out the effect in a compliant browser:

input[type="email"] {
    border:0;
    outline:none;
    box-shadow:none;
}

IE7 compliance would require:

input.txt-box {
    border:0 !important;
    outline:none !important;
    box-shadow:none;
}

https://developer.mozilla.org/en/CSS/%3Ainvalid

Example: http://jsfiddle.net/AlienWebguy/cUgW4/

Answer 2

If you install the Firebug extension in Firefox and use it to inspect the form field in question, you’ll be able to see the CSS that Firefox uses internally to style it. (Make sure “Show User Agent CSS” is ticked in the Style tab’s pop-up menu.)

In Firefox 5 on my Mac, it uses the following CSS:

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

Interesting they use box-shadow. There was a question on Stack Overflow I saw recently that mentioned the :-moz-ui-invalid selector: see Style HTML5 input types if validation fails.