Delay HTML5 :invalid pseudo-class until the first event
http://www.alistapart.com/articles/forward-thinking-form-validation/ Since we only want to denote that a field is invalid once it has focus, we use the focus pseudo-class to trigger the invalid styling. (Naturally, flagging all required fields as invalid from the start would be a poor design choice.) Following this logic, your code would look something like this… <style> input:focus:required:invalid {background-color: … Read more