Apply CSS to html INPUT control based on type attribute

If you want to add common look to all control in you website then you generally specify css for that element in your style sheet. Doing this will apply same look and feel to all element of that particular category. For example for input element you can add in CSS like

input
{
  border-right: #a9a9a9 1px solid;
  padding-right: 4px;
  border-top: #a9a9a9 1px solid;
  padding-left: 4px;
  padding-bottom: 4px;
  border-left: #a9a9a9 1px solid;
  padding-top: 4px;
  border-bottom: #a9a9a9 1px solid;
}

But there are different types under input element like text, button, checkbox, submit, password etc. Apply CSS to input element will be reflected of all the types of the input. To control this we can specify the type attribute in CSS.

input[type="text"]
{
  border-right: #a9a9a9 1px solid;
  padding-right: 4px;
  border-top: #a9a9a9 1px solid;
  padding-left: 4px;
  padding-bottom: 4px;
  border-left: #a9a9a9 1px solid;
  padding-top: 4px;
  border-bottom: #a9a9a9 1px solid;
}

input[type="button"]
{
  border-right: #a9a9a9 2px solid;
  padding-right: 2px;
  border-top: #a9a9a9 2px solid;
  padding-left: 2px;
  padding-bottom: 2px;
  border-left: #a9a9a9 2px solid;
  padding-top: 2px;
  border-bottom: #a9a9a9 2px solid;
}

Discussion