Custom Radio Div/Images/Buttons

Question

I want the functionality of a radio button, yet have the option of choosing based on an image. For example, I am going to have a label (Payment Methods). I would like to set up various DIV/Images with each accepted payment (Credit/card, PayPal, western union, etc). Instead of choose a small little circle radio button, id rather them just click the image and have a border or an image change to indicate that method has been chosen.

It would be even better yet if I could have this functionality with a DIV element, that way I can add just put whatever I want in the DIV (text, images, etc) and have the DIV itself have some sort of border that appears on selection.

Is this possible using input type=radio? If this isn't possible using radios, than how you would suggest the implementation of this? If this has been implemented please link :)

Answer 1

It is not possible to directly style the checkbox or radio button, however, what I do in these situations is I make my own custom checkbox, using jQuery, and based on the user selection, I do one of two thigs:

1) Change the value of a hidden field,

2) Change the value of a checkbox that DOES exist, but that is not displayed to the user, so display:none; would be applied to it.

It is quite simple, make you checkbox out of a div even, lets say 15px high and 15px wide, and bind click events to it using jQuery. You can then toggle the class each time it is clicked, which in turn gives you freedom over styling it, and based on the class or click state, you can assign the actual checkbox value to your hidden field or hidden check box.

Does this help?

A good resource for this is: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/

Or if you'd have a plug-in do the work: http://plugins.jquery.com/taxonomy/term/1360