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;
}

15 comment(S)


Md.salim Bhuyan on Feb 26, 2009 11:28 AM

Thanks for your helping site.

Mohsin on Mar 31, 2009 09:38 PM

input[type="button"] - this will not work in IE ,if any body knows solution then plz help me. i have also tried "input.text" but still not working in IE

Alex on Jun 14, 2009 07:24 AM

try: input[type="submit"]

Lars on Nov 26, 2009 02:33 AM

Just add class="submit" and input.submit should work for all browsers ;->

Internet Marketing Boise on Apr 24, 2011 11:29 PM

How do you apply a css style that affects only the text that is created by the input value="" tag?

For example:
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=120);

creates a shadow in IE that affects the shadow of the input button, but I want to apply that to the text generated by the value field of input type=submit", so the text can have a shadow, not the button (freaking IE STILL does not implement text-shadow style, even in their newest version, no wonder they are falling behind in every conceivable market, their products are incompetent! Sorry for that rant :)

prabha on Sep 14, 2011 03:53 AM

This is very useful...
Thanks

masum on Nov 16, 2011 11:59 PM

please visit this site for more information about web designing and PHP..

WissenOnline on Mar 15, 2012 08:48 AM

Thanks, i was searching for that css info soooo long time!

mohammad on Apr 21, 2012 11:08 AM

this is very goooood tnx

sponsored

sara on May 25, 2013 03:00 AM


sara on May 25, 2013 03:02 AM

thnx for the all teem.... this is good site for help.....(Y)

jnjk on May 13, 2016 06:12 AM


jnjk on May 13, 2016 06:12 AM


jnjk on May 13, 2016 06:12 AM


jnjk on May 13, 2016 06:12 AM


Leave a comment