HTML5 Required input styling

html css validation required
Xodarap picture Xodarap · Mar 9, 2011 · Viewed 32.8k times · Source

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 try to submit the form without filling out a required element. Is there a selector for this? How about for the little message box which pops up?

Answer

Ilia Draznin picture Ilia Draznin · Mar 10, 2011

You can use :valid and :invalid selectors. Something like this

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

However, this will only work in browsers that support native validation, and only for fields that make sense. As far as I know, right now that only means Chrome (maybe Safari, but haven't checked).

So by native validation I mean that in chrome if you do <input type="email"> the field's value will be validated for email type string (without any additional javascript), so the styles above will work. However, if you were to attach them to a type="text" field, or a second password field (that is suppose to match the first), you'd only ever get green because everything is valid, and in the case of password, there's no "type" for that anyway.

Which basically means that to support all browsers, and more importantly, wider array of validations you still have to resort to javascript, in which case assigning .valid/.invalid class shouldn't be a problem. :)

Related questions

override css for html5 form validation/required popup

How can I override the default popup for a required field on a HTML5 form? Example: http://jsfiddle.net/uKZGp/ (make sure you click the submit button to see the popup) The HTML <form> <input type="text" …

Read More
Can I mark a field invalid from javascript?

From reading this post I have found that there are some pseudo classes for 'valid' and 'invalid' input values introduced to HTML5. Is there a way I can mark an input field as invalid/valid from javascript? Or alternatively, can …

Read More
HTML5 Validation with Opera and Safari

I am having a problem with the HTML5 validation on Opera and Safari. In Opera, the message bubble it's not displaying any text, and in safari the validation does not occur when i press the submit button. In IE, Mozilla …

Read More