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

Share Improve this question Follow edited Feb 25, 2011 at 18:09 Jitendra Vyas asked Feb 25, 2011 at 17:53 Jitendra VyasJitendra Vyas 153k240240 gold badges587587 silver badges868868 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.