Styling Forms with CSS Attribute Selectors

CSSWeb DevelopmentFront End Technology

Apply styles to HTML elements with particular attributes using Attribute Selectors in CSS. 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-".

Following is the code for styling forms with CSS attribute selectors −


 Live Demo

<!DOCTYPE html>
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="submit"] {
   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;
<h1>Css attribute selector example</h1>
<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" />


The above code will produce the following output −

Published on 11-May-2020 13:00:50