globally style all html buttons only without requiring a 'class','id' or 'name'

Question

The following styles all input tags, which means any 'type' of input tag gets styled.

input {
 color:#050;
 font: bold 84% 'trebuchet ms',helvetica,sans-serif;
 background-color:#ffffff;
 border:1px solid;
 border-color: #696 #363 #363 #696;

}

how do I isolate it so all button input 'types' are styled differently than text input 'types' with out needing to add/use 'id','class' or 'name'.

This must be a cross-browser solution.

Solution 1

input[type=text]{
  color:#FF9900;
}

input[type=password]{
  color:#FFFF00;
}

input[type=submit]{
  color:#FFFFFF;
}

It supports password, submit, text, select, radio and a couple more. I'll edit in the list when I find it. You should note that some behave strangely, for example an input box (text) with 100px width and 2px padding will appear differently to a submit input box with the same properties, you'll need to pad the submit with an extra 3/4 pixels, if I remember correctly.

Solution 2

Using css2 selectors you can do what citricsquid and pixeltocode suggested...

These selectors mentioned were added at the IE7 version .. so you cannot do what you want with CSS only on pre-IE7

Either use classes or javascript for IE6..

You can read about it over at miscrosoft: CSS Compatibility and Internet Explorer

Solution 3

you can match all HTML buttons using

input[type=submit] { color: #050; }

Comments

[sam]

Are you sure? What version? I've not used this for a while now but I've never had a problem (that I'm aware of).

[scunliffe]

It won't work in IE6 for sure... can't recall about IE7... works in IE8 though.

[T.J. Crowder]

@JerA: It does from IE7 onward.

[PJUK]

is IE6 even compatible with the internet any more?