On a form I've two radio button Yes and No. I want to change the default look of radio buttons

to like this.

Edit: I would like to change the radio buttons into <a> anchor when JavaScript is enabled if it's not easy to change the look of default radio via css.

On a form I've two radio button Yes and No. I want to change the default look of radio buttons

to like this.

Edit: I would like to change the radio buttons into <a> anchor when JavaScript is enabled if it's not easy to change the look of default radio via css.

• javascript
• jquery
• css
• xhtml
• radio-button

2 Answers 2

Easiest way? Set the images as labels with the for attribute pointing to the radio buttons. Then set the radio buttons to display:none;

<input type="radio" name="radio[1]" /><label for="radio[1]"><img src="/yes.png"></label>
<input type="radio" name="radio[2]" /><label for="radio[2]"><img src="/no.png"></label>

p.s. This uses built in HTML functionality that works everywhere and doesn't require javascript. Use some CSS meta selectors (:hover etc...) to add animation.

UPDATE:

Just looping back after a long time and realised this could do with a little more explanation for beginners. When the for attribute is set on a label, clicking the label is functionally the same as clicking the element it's for attribute points to. For pleteness, the for attribute should be set to the id of the form element.

Rather than try to coerce the images to work with the <radio> tag, I would just put the images where you want them, bind the various behaviors to them using jQuery, and have them modify hidden input fields. I think it will be much easier that way.