Forms and CSS

A new range of CSS pseudo-classes, known as the UI element states pseudo-classes, augments the extra functionality provided to forms by HTML5. These pseudo-classes let you style form elements based on their current interaction or validation state. The names of the pseudo-classes are really quite descriptive, and I imagine their meanings are clear to you, but just in case you’ve had a hard day and aren’t thinking straight, I’ll briefly explain them.

Form fields that are required (that is, have the required attribute set to true) can be styled with the :required pseudo-class, the opposite of which is :optional. You could, for example, give a dark border to required fields and a lighter border to optional ones:

input:required { border-color: ...

Get The Modern Web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.