What CSS is used by browsers for styling invalid &

问题:

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?

回答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/

回答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.