• Post category:CSS

CSS Required Selector | Explained

CSS Required Selector

In this article, we will see about CSS required selector. Required is one of the pseudo-class selectors in CSS. You can use the “:required” pseudo-class selector to target input elements which are having the state required.

How to select :required selector

It selects any HTML element targeted by the selector if its status is required.

declaration list;


color: white;

It selects any input element if its status is required.

Example code

<style type="text/css">
   input:required {
         background-color: red;

     Name: <input type="text"><br><br>
      Email-id: <input type="email" name="email"  required><br><br>
      Password : <input type="password" name="txtpd" required>



css required selector


  1. In the above code, we have created <form> tag within that we have three created <input> tags.
  2. We used the “required” attribute in the <input> tag for “Email” and “password”.
  3. Then we selected input:required in CSS and apply red background. It selects which input tags have required attribute.
  4. So, see the above output, the “Email” and “password” <input> tag is displayed red background.

Leave a Reply