CODEWITHSUNDEEP
javascripthtmlcontrols
Larsenal
Larsenal

Reputation: 51186

HTML Radio buttons styled as Toggle Buttons

Instead of having the typical disks with labels to the right, I want the options to be presented as clickable buttons. The selected option should appear to be pushed or pressed in.

I want to do this in HTML, but an example of this are the top left buttons in the program Audacity where you select the cursor/tool mode.

What's the best way to do this?

alt text
(source: freemusicsoftware.info)

Upvotes: 2

Views: 1503

Answers (3)

Chris Van Opstal
Chris Van Opstal

Reputation: 37567

There are a number of JavaScript plugins for doing this:

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

Upvotes: 6

Sampson
Sampson

Reputation: 268424

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.

Upvotes: 3

Josh Stodola
Josh Stodola

Reputation: 82513

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

Upvotes: 1

Related Questions