HTML5 Required input styling

Question

In HTML 5, we can mark inputs as required and then select them with the [required] pseudo-selector in CSS. But I only want to style them when they

Answer 1

This solution will style input fields that are required via attribute while blank. Browsers will remove the :invalid pseudo class when populating a required field on keydown. Recent versions of Firefox automatically apply something similar to this style but Chrome and IE do not.

input[required]:invalid { box-shadow: 0 0 3px 1px red }

Try it: http://jsfiddle.net/2Ph2X/