HTML Radio buttons styled as Toggle Buttons

Answer 1

Probably the best way is to create a real radio button, and then control the rendering of an element based upon the status on the radio button with javascript. If the radio button is selected, render background-a, else background-b (or use a sprite). Control the status of the radio button via the click event of your custom element.

Answer 2

There are a number of JavaScript plugins for doing this:

• Another jQuery demo
• Prototype demo

Just replace the images they're using with your images and you should be good to go.

Answer 3

Using this jQuery UI plugin, you can customize radio buttons and/or checkboxes to look however you want.