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

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.