Styling Forms with CSS Attribute Selectors

CSS Web Development Front End Technology

Apply styles to HTML elements with particular attributes using Attribute Selectors in CSS. Let us see which attribute selectors are available with the rules.

The [attribute] Selector

The [attribute] selector selects elements with a specified attribute. Here, the link with the attribute target is styled −

a[target] {
   background-color: red;
   color: white;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      a[target] {
         background-color: red;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Demo Heading</h2>
   <a href="https://www.tutorialspoint.com" target="_blank">Tutorialspoint</a>
   <a href="http://www.tutorix.com">Tutorix</a>
</body>
</html>

The [attribute="value"] Selector

The [attribute="value"] selector selects elements with a specified attribute and value. Here, the attribute is target and the value _blank. The <a> with both this target attribute and _black value is styled −

a[target="_blank"] {
   background-color: red;
   color: white;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      a[target="_blank"] {
         background-color: red;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Demo Heading</h2>
   <a href="https://www.tutorialspoint.com" target="_blank">Tutorialspoint</a>
   <a href="http://www.tutorix.com" target="_self">Tutorix</a>
</body>
</html>

There are following rules applied to attribute selector.

p[lang] − Selects all paragraph elements with a lang attribute.
p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".
p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".
p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".

In the below example, we have styled the forms using the attribute selectors. Let us see how −

Style the input type text

Here, we have styled the input type text using the CSS [attribute] Selector. The following styles is set only for the input element of type text −

input[type="text"] {
   width: 300px;
   display: block;
   margin-bottom: 10px;
   background-color: rgb(195, 250, 247);
   font-size: 18px;
   padding: 15px;
   border: none;
}

Style the input type password

Here, we have styled the input type password using the CSS [attribute] Selector. The following styles is set only for the input element of type password −

input[type="password"] {
   width: 300px;
   padding: 10px;
   background-color: red;
   color: white;
   border: none;
}

Style the input type button

Here, we have styled the input type button using the CSS [attribute] Selector. The following styles is set only for the input element of type button −

input[type="button"] {
   padding: 10px;
   font-size: 18px;
   border: none;
   outline: none;
   background-color: rgb(75, 163, 16);
   color: white;
}

Example

The following is the code −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      input[type="text"] {
         width: 300px;
         display: block;
         margin-bottom: 10px;
         background-color: rgb(195, 250, 247);
         font-size: 18px;
         padding: 15px;
         border: none;
      }
      input[type="button"] {
         padding: 10px;
         font-size: 18px;
         border: none;
         outline: none;
         background-color: rgb(75, 163, 16);
         color: white;
      }
      input[type="password"] {
         width: 300px;
         padding: 10px;
         background-color: red;
         color: white;
         border: none;
      }
   </style>
</head>
<body>
   <h1>Css attribute selector example</h1>
   <form>
      <label for="fname">First name:</label><br />
      <input type="text" id="fname" name="fname" value="Ron" />
      <label for="lname">Last name:</label><br />
      <input type="text" id="lname" name="lname" value="Shaw" />
      <label for="pass">Password:</label><br />
      <input type="password" id="pass" name="pass" value="password" />
      <input type="submit" value="Submit" />
   </form>
</body>
</html>

AmitDiwan

Updated on: 27-Dec-2023

258 Views

Kickstart Your Career

Get certified by completing the course

Get Started