How do I apply css for textboxes only but not for all the <input> types like CheckBoxes, etc.?

Question

If all browsers supported attribute selectors, we could easily do the following:

input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } 
input[type='radio'] { margin:0 20px; } 
input[type='checkbox'] { border:2px solid red;

But I don't think all IE versions of 6 and greater support this.

I think I'd like to avoid skins. Not sure why, other than I tried them and I recall having a negative experience. It was probably my lack of knowledge. Are there any issues in using and CSS, external or otherwise?

What's the best way to handle this? Currently I am assigning separate classes to each control type.

Answer 1

You are correct that IE6 does not support the attribute selector. The only other way would be to have checkbox-specific classes that you assign manually. I must be a newb too, though, because I have no idea what you're talking about in regards to "miccing skins".

I'd say the most flexible way of handling this (if you're going for IE6 compatibility) would be to utilize a Javascript framework like jQuery to assign styles to the elements in question. With a selector like:

$('input[type="checkbox"]').each( function() {
    $(this).css({
        'property': 'value'
    });
});

You've got a cross-browser compatible way of flexibly assigning CSS to checkboxes by type only.

EDIT:

Fixed initial coding error. Thanks to Mr. Murdoch for being what a cup of coffee obviously is not.