: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 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. User Avatar
    aaaaa
    Permalink to comment#

    sddd dcdc fvg

  2. User Avatar
    siva
    Permalink to comment#

    kannan

  3. User Avatar
    kannannnna
    Permalink to comment#

    sivabalan test message

  4. User Avatar
    Mahendra
    Permalink to comment#

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

  5. User Avatar
    dsfdasf
    Permalink to comment#

    sdfsdgsgfdf

  6. User Avatar
    Jaiime
    Permalink to comment#

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

  7. User Avatar
    shreyas
    Permalink to comment#

    nice article thank u

  8. User Avatar
    Saher Team
    Permalink to comment#

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

  9. User Avatar
    fgg
    Permalink to comment#

    gfgg

  10. User Avatar
    Haseeb

    f you want to make sure the required form fields are filled, use the required attribute for your input field. An alternative to css

    Example

    In above example user cannot submit a form without filling the name textbox field.

    REF: http://www.thesstech.com/html5/required_attribute

    Demo:
    http://www.thesstech.com/tryme?filename=required

  11. User Avatar
    Iris
    Permalink to comment#

    Where did you define the info Messages like “This is a required field”?

  12. User Avatar
    okegima
    Permalink to comment#

    hi.

    is there a way with css3 only to remove the required condition into the input ?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag