CSS - Input-Rule for all Browsers`?

Question

I added to every textarea, every textfield and every button a special class. I have many buttons and many textfields on my page so i decide to clean my code.

I delete all the special classes like (.textarea), (.textfield) and (.button) in the html code. Over 180 hits ... so my code is shorter now.

I add the three new rules into the CSS -> input.button , input.text, textarea

But was this a good idea? Coz it dont work on every browser -.-

Is there a better method (rule) like -> input.button , input.text, textarea ? Or should i use my first solution?

Answer 1

In your CSS, use input followed by a type attribute check. For example, to apply a rule to text boxes and textareas, you'd use:

input[type="text"], textarea

To apply a style to buttons, you'd use:

input[type="button"], input[type="submit"]

This works in all browsers that I've tested with (IE6+, Firefox, Chrome, & Safari).

Answer 2

IE7+ allows you to use the attribute in your CSS selectors ala input[type='text'] usage shares on IE6 are between 11-17% depending on where you look, so this might be an option. Otherwise adding a class to each shouldn't be causing too many problems. This question might help http://stackoverflow.com/questions/470702/css-selector-for-input-type

for more info on support of different CSS selectors check out http://www.quirksmode.org/css/contents.html