Replacing radio buttons with <a>s?

simisker · 9 Sep 2010 at 19:24

I need to create a form that uses three radio buttons.

I need it to hide the OS's radio buttons, and replace them with CSS-styled <a>s. Or <div>s. But not images.

Each <a> needs to have a different style.

JQuery-based solutions are fine, but I can't write from scratch.

Anyone got any ideas or links?

I can't seem to find anything relevant, amazingly. Might be me having a brainfart. It's definitely possible

simisker · 9 Sep 2010 at 20:15

Cheers as ever, Trip.

However, that doesn't really do what I want it to do.

I really want each radio button to act as an anchor, with :hover and :active states.

Imagine a "traffic light" set of three buttons; one red, one amber and one green. I need the default state to be, say, desaturated, a hover state to be something really highlighty, and an active/selected/checked state to be a bright version, with e.g. a CSS border applied.

The big problem I'm having is that radio buttons obviously don't have a hover state. Hence the mention of anchors.

Ta, though

simisker · 9 Sep 2010 at 22:03

Sorted!

I found a javascript-based solution, that essentially hides the radio buttons/checkboxes and utilises the labels, so it's nicely degradable/accessible:

http://www.chriserwin.com/scripts/crir/

simisker · 10 Sep 2010 at 10:15

Tripnologist said:
You should have looked at it a bit more as it does exactly what you want. It replaces your radio buttons with anchors. The demo doesn't have hover or active states on them but there was nothing stopping you from adding your own. The selected state itself is just a background image shift on the a tag.

I didn't like its out-of-the-box reliance on background images; the solution I found relied on the labels out of the box, making it instantly more attractive to me. And because jqtransform also addressed other form elements, it would have been needlessly heavier unless I started semi-blindly hacking around in the .js.

Maybe for a later project, but not this one.