styling a radiobutton list

Question

I'm trying to style an asp.net radiobutton list however there doesnt appear to be any easy way around it. I want to change the circle to a circle with a colour in it.
The only way i could get rid of the default circle was to change the -webkit-appearance property to 'none'. However this means I cannot select the radio button at all.
The radio buttons have the correct background image when I use this:

radiobutton.Attributes.CssStyle.Add("background",
                                    "url(/kisses/designs/colours/red.gif) no-repeat");

but this background is applied to the span and not the input element. there must be a much easier way around this...

Answer 1

Styling form elements is very system and browser specific. If you really want to consistently change their display, the easiest way is with a Javascript library like Uniform.

Answer 2

In fact there is - I often use this javascript replacement solution http://lipidity.com/fancy-form/

Works from IE6+ (ie6 included). If you prefer jQuery over Mootools just search jQuery custom checkbox or something like that on google - there are tons of other jquery based solutions. This is just my prefered one.