• 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

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

selector:required
{
declaration list;
}

Ex:

input:required
{
color: white;
background-color:red;
}

It selects any input element if its status is required.

Example code

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

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

</body>
</html>

Output:

css required selector

Steps:

  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