Highlighting a radio button with CSS

Question

I have been trying to highlight a radio button with CSS but have been unsuccessful to get styling to work in FireFox. I see some methods of using images to render highlighting. Is there a preferred way to handle radio button highlighting across multiple browsers?

Example

<input type="text" style="border-color:#FF0000">
<input type="radio" style="border-color:#FF0000">

The text box will have a border that is red but the radio button will not take the border color?

Answer 1

Radio buttons are OS-level controls and cannot really be styled the way things like textboxes can. If you wrap your radio buttons in a DIV or something you can apply the highlighting to the DIV instead.

Answer 2

Uniform is a nice javascript library which replaces form controls with graphic versions which you have good control over: http://pixelmatrixdesign.com/uniform/. That's not a new idea in itself, but Uniform's controls are probably the best attempt at doing this properly - they're robust, cross-browser compatible, and degrade gracefully where required.