Style a <input type="radio">?

[jozomannen]

I use this in my css:

input {
border: 1px solid black;
}

But I don't want the border around my radiobuttons. I've tried different things to style thoose, but I can't figure out how (I don't want to use an id or a class).

I want this to work:
input.radio {
border: 0;
}

Any ideas?

[bedlam]

Well, in a perfect world it would be possible to use attribute selectors [w3.org]. However, one of the imperfections of the world is everyone's favourite browser simulator, Internet Explorer :-)

In theory, this:

input[type="radio"] { border-style:none; }
input[type="text"] { border:1px solid #000; }

...should do what you like. But since IE doesn't support attribute selectors, you can take Tedster's suggestion [webmasterworld.com] and do one of the following:

1. Use a javascript expression in your css (yes, javascript in your css...):

   CSS:
   

   input { border-width: expression(this.type=="text"? '1px' : '0'); }

   Translation: "if this is an input element with the 'type' attribute set to 'text' then set the 'border-width' property to '1px', otherwise, set it to '0'."

2. Create classes to add to each type of input element:

   CSS:
   

   input.text { border-width:1px; }
   input.radio { border-width:0; }

   HTML:
   

   <input type="radio" class="radio" />
   <input type="text" class="text" />

   
   

Neither solution is ideal; if a visitor's browser has javacript disabled or cannot execute javascript (think of e.g. phones...), then method 1 simply will not work.

Method 2, on the other hand, should work in any css enabled browser, but on large forms could add quite a lot of overhead because of the need to add extra markup on all or many form elements...

-B

Incidentally, though I would have thought that quotes should be used when using attribute selectors in css (e.g. 'input[type="text"] { ... }', the actual spec implies that they need not be. The examples on the attribute selector page in the css 2.1 spec include these:

*[lang=fr] { display : none }
*[langĻ="en"] { color : red }

[jozomannen]

That was a tricky one, I solved it like this, I hope it's the best method:

input {
border: 1px solid black;
}

.radio {
border: 0;
}

then I set <input type="radio" class="radio">

Big thanks for your help.