forms - What CSS is used by browsers for styling invalid <input type="email">s?

Question

OK, so in HTML5 browsers you can have:

<input class="txt-box" type="email" name="email" rel="required" />

When the email is not in the proper format it puts a red box around it.

My question is: what is the CSS that determines that style?

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/