:required

The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be the sole validator of the user’s input.

Let’s say we have an input with an attribute of type="name" and make it a required input using the required boolean attribute¹:

<input type="name" name="fname" required>

Now we can style that input using the :required pseudo class selector:

/* style all elements with a required attribute */
:required {
  background: red;
}

We can also style required form fields using simple selectors as well as chaining together additional pseudo class selectors:

/* style all input elements with a required attribute */
input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

/**
 * style input elements that have a required
 * attribute and a focus state
 */
input:required:focus {
  border: 1px solid red;
  outline: none;
}

/**
 * style input elements that have a required
 * attribute and a hover state
 */
input:required:hover {
  opacity: 1;
}

Demo

See the Pen :required Styling by Chris Coyier (@chriscoyier) on CodePen.

Points of Interest

The required attribute is treated as a boolean meaning it does not require a value. Simply having required on an element lets the browser know this attribute exists and the corresponding input is in fact a required field. Although, according to the W3C spec, the required attribute also works with an empty value or a value with the attributes name.

<input type="name" name="fname" required="">
<input type="name" name="fname" required="required">

The required attribute also requests for the browser to use native callouts such as the bubble message depicted from the demo.

For those inputs not styled using :required, authors may also customize non-required elements using the :optional pseudo class selector along with :invalid and :valid which are triggered when a form field’s data requirements are met.

Form validation can also be complimented alongside required with the pattern attribute to help filter data depending on the input’s type attribute. Patterns can be written as a regular expression or a string. In the example below we’re using a regular expression to match the syntax for an e-mail address.

<input type="email" name="email" pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required>

The :required attribute works on radio buttons. If you put required on one radio button (or all), that particular group of radio buttons will be required. On checkboxes, makes each individual checkbox required (to be checked).

Related Properties

• Pseudo Class Selectors
• :optional
• :valid
• :invalid

Other Resources

• W3C Selectors Level 4
• CSS Basic User Interface Module Level 3
• :required | MDN Docs
• Wufoo: Required Attribute
• WHATWG Form Validation
• Caniuse.com

Browser Support

¹ Boolean Attributes: A number of attributes in HTML5 are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. If the attribute is present, its value must either be the empty string or a value that is a case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace.