Replace default radio buttons

JavaScript
1

Is there a way to replace the default tiny radio buttons with larger ones of a different shape? I figure it could be done with Javascript (which language I don’t know). I’d like to use long rectangles with rounded corners. The context will tell the user that these are option buttons.

I need larger radio buttons for the iPhone. I’m still displaying a web page, so whatever works with HTML would be good to have! Any suggestions?

I’ve gotten several CSS suggestions for styling the radio buttons, but they all have problems.

Thanks!
Steve

2

The only way I can think of (that will definitely work) is to create 2 images (one for checked and one for unchecked) and then use an <img> with an onclick to replicate the functionality of a normal radio button. The value for the button (when in the checked state) can be stored in a hidden <form> input. When the button state is unchecked the hidden input can be removed using javascript.

3

The following pages will be helpful
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
[URL=“http://lipidity.com/fancy-form/”]
http://lipidity.com/fancy-form/