input:invalid:not(:focus)
The CSS3 User Interface Module specifies some new interesting pseudo-class selectors that are useful for enhancing your HTML5 forms. One of them is invalid.
Say you have an input of the type email, and enter something that is not a valid email address. Then the invalid pseudo-selector would apply. If someone is currently typing in their email address however, you might not want it to be marked as invalid, as the user isn’t done yet. With some advanced CSS3 you can accomplish this. Take a look at the following code:
input:invalid:not(:focus) {
background: red;
}That will make the background of an input red if it is invalid, as soons as the user focuses something else on the page. They can then go back and fix the error. This also applies to inputs with type url or with a specified regexp pattern. As far as I know it is currently only supported in Opera. Do you know if it’s supported in any nightly builds of other browsers?