: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

<form>
  
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
  </div>
  
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required />
  </div>

  <div>
    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" required />
    <label for="radio-choice-1">Choice 1</label>
    
    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" required />
    <label for="radio-choice-2">Choice 2</label>
  </div>
    
  <div>
    <label for="textarea">Comment</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea" required></textarea>
  </div>

  <div class="buttons">
    <input type="submit" value="Submit" />
  </div>
</form>

input:required,
textarea:required {
  border-color: red !important;
}
input:required + label {
  color: red;
}

form {
  padding: 20px; 
  max-width: 500px;
  margin: 0 auto;
}
form div {
  padding: 5px;
}
label {
  display: block;
}
input + label {
  display: inline-block;
  margin-right: 10px;
}

input[type=text],
input[type=email],
textarea {
  border: 1px solid #999;
  padding: 5px;
  width: 100%;
}

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

Browser Support