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

This site uses Akismet to reduce spam. Learn how your comment data is processed.