CSS provides us with a handful of pseudo classes that are specific to HTML5 forms. They allow us to create forms that are easier to fill out by highlighting fields that are required, optional, valid, invalid, etc.

Pseudo Classes for Forms

The following pseudo classes are all related to form elements with examples on how they are used.

:default

The :default pseudo class applies to the default element in a group of similar elements within a given form. For example, if you have a form that has a submit and cancel button you could select the default button using :default.

See the Pen gsilz by Brian (@brianmtreese) on CodePen.

:default is supported in

:required

The :required pseudo class applies to any input with the required attribute set within a given form. This can be very useful to highlight the required fields within a form.

See the Pen dynGK by Brian (@brianmtreese) on CodePen.

:required is supported in

:optional

The :optional pseudo class applies to any input without the required attribute set within a given form. May or may not be useful since most of the time simply highlighting the required fields will be enough.

See the Pen vCgpo by Brian (@brianmtreese) on CodePen.

:optional is supported in

:valid

The :valid pseudo class applies to any input that contains valid data within a given form. This can be very useful as it will provide the user with feedback as they are filling out the form.

See the Pen JcFhe by Brian (@brianmtreese) on CodePen.

:valid is supported in

:invalid

The :invalid pseudo class applies to any input that contains invalid data within a given form. This can be very useful as it will provide the user with feedback as they are filling out the form.

See the Pen ItkGn by Brian (@brianmtreese) on CodePen.

:invalid is supported in

:in-range

The :in-range pseudo class applies to any form element that contains a value within the specified range for the input within a given form. Similar to valid/invalid it can be useful for providing feedback to the user when filling out the form.

See the Pen fckHB by Brian (@brianmtreese) on CodePen.

:in-range is supported in

:out-of-range

The :out-of-range pseudo class applies to any form element that contains a value outside the specified range for the input within a given form. Similar to valid/invalid it can be useful for providing feedback to the user when filling out the form.

See the Pen yirbF by Brian (@brianmtreese) on CodePen.

:out-of-range is supported in

:read-only

The :read-only pseudo class applies to any input with the readonly attribute set on it in a given form. It can be useful to gray out disabled fields for forms.

See the Pen BodAt by Brian (@brianmtreese) on CodePen.

:read-only is supported in

:read-write

The :read-write pseudo class applies to any input without the readonly attribute set on it in a given form.

See the Pen GmAwz by Brian (@brianmtreese) on CodePen.

:read-write is supported in

Client Side Only

The important thing to remember when using CSS and HTML validation to style your forms is that they are only client side validation. You will still need to validate on the server as well. The role that CSS and these pseudo classes play is to simply enhance the form and make it easier for users to fill out.

Sources

• http://html5doctor.com/css3-pseudo-classes-and-html5-forms
• https://developer.mozilla.org/en-US/docs/Web/CSS/:default
• https://developer.mozilla.org/en-US/docs/Web/CSS/:required
• https://developer.mozilla.org/en-US/docs/Web/CSS/:optional
• https://developer.mozilla.org/en-US/docs/Web/CSS/:valid
• https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
• https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range
• https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range
• https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write