CSS for input field depending on input field type

Home / How to / CSS for input field depending on input field type

If you need to do separate styling for input types (file, text, submit, reset and button) but does not want to use the conventional methods of applying different classes for every type.

CSS 3 offers a very convenient method

input[type="text"] {
   background-color: #FFFF00;
   border: solid 1px;

}
input[type="button"],input[type="submit"] {
   background-color: #336600;
   color: #FFFFFF;
}

and use it with your forms without adding any classes etc.

<form id="form1" method="post">
  <input id="textfield" name="textfield" type="text" />
  <input id="button" name="button" type="submit" value="Submit" />
</form>

Take a look at the screenshot of the example page 🙂

css3 input type style demo

Leave a Reply