Grow your CSS skills. Land your dream job.

:required

Last updated on:

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 attribute1:

<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

Check out this Pen!

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

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any None Any 12.1+ 10+ None None

1 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.

Comments

  1. aaaaa
    Permalink to comment#

    sddd dcdc fvg

  2. siva
    Permalink to comment#

    kannan

  3. kannannnna
    Permalink to comment#

    sivabalan test message

  4. Mahendra
    Permalink to comment#

    there is any way to use this :required in internet explorer 8?

  5. dsfdasf
    Permalink to comment#

    sdfsdgsgfdf

  6. Permalink to comment#

    Has anyone figure out on how to make this happen on safari yet?
    Please and Thank you.

  7. shreyas
    Permalink to comment#

    nice article thank u

  8. Formally, an input type is equal =”email” value. Regular Expression is useless :mrgreen:

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".