Any way to use an image for a radio button?

Does anyone know a way to use an image as a radio button? I've tried a background image in css and several experiments, but nothing works so far.

It's very maddening, LOL. Right clicking the button and choosing "view background image" shows the image I want, but it won't appear on the page.

I've never seen this done to my knowledge.

What exactly are you trying to achieve?

Could there be another way?

Well, I don't have Flash, which is the only obvious way to style a radio button that I can think of. Or perhaps use a javascript sniffer and use a rollover/onclick for js enabled browsers, but that seems a bit heavy for a style that some people can't see.

What I want to achieve is a better-looking, easier-to-click radio button. Running the dimensions up looks awful.

Ouch, big programme there, and it won't work with CSS it might work with javascript but otherwise...

Edit by Geoff:
What is the point of this post? In order to maintain the integrity of the forums, please do make post that add nothing to the thread discussion.

Thing is Mason, thinking from the end-user/accessibility viewpoint, how will people know they should treat these 'images' as radio style buttons?

instead of replacing the radio buttons with an image have you considered using CSS to style them to match your site more? Seems that would be a comfortable middle ground.

__________________

This is entirely possible, indeed!

I have seen this done on a friends CMS... he is in fact an admin here - spinal007.

I'll see if I can draw his attention to this thead.

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

I've made custom radio boxes before. Let me see if I can explain this clearly:

I started out with three instances of a radio button - off, active and selected. For the HTML, I made a <div> with a CSS background image of the radio button and a hidden radio button element inside. Using JavaScript, I wrote a quick little function that switched the background and told the radio button to be selected when the user clicked on the <div>.

Understand? The only problem is that is uses JavaScript. It wouldn't be too difficult to make it still work without the extra styling if JS was disabled, though.

I should write an article about this...

That's a good workaround Ryan, thanks. If you're going to need js though, why not just use a rollover/onclick? I'll try to use the concept with css but I'm not optimistic about IE support for it.

I may investigate XForms even though they require a browser plugin. I'm not through with introductory XSLT yet but XForms is on my list.

I made custom checkboxes once and it worked fine in IE. I don't quite understand what mean about the rollover/onclick stuff...

I couldn't find my old script, so I made a new one. I found the old checkbox images, though. This is fairly universal, but you'll need to be a little familar with JavaScript to play around with it. I haven't tested in IE, but it works fine in Firefox and Safari. I don't really see any reason why it wouldn't work in IE. Let me know if there are any problems with it.

Oh, and if someone has JavaScript disabled, there is no background image and a regular checkbox is displayed.

http://ryanfait.com/checkbox/

I set up a quick example: http://www.pinesandneedles.com/radio
The idea is similar to ryan's above...

The concept:
1. Find all forms on page
2. Find all input controls with the form
3. Loop through controls and find the ones with type='checkbox' or type='radio'...
3.1. Hide control, append an image next to the control
3.2. Attach events to image (click, mouseover, etc)

You can develop it further by using different images, ie.: some of my checkboxes have a class 'YesNo', which displays a green tick when the control is checked and a red x when the control is not checked... etc

PS.: Ryan, play around with the bottom checkboxes and you'll see the image/checkbox don't always match...

PPS.: Works without JS too!

Okay, I'll have to do a little more playing with it. It can't be fooled in Safari. In Firefox, if you click the real checkbox, it doesn't fire the other one, but that doesn't matter because they'd normally be hidden. I've have a gander at it in Windows.

On yours, I just get 5 alerts saying "Cannot insert HTML" in Safari... No radio buttons or checkboxes are visible.

Aw, my script runs horribly in IE6. I'm working on fixing it now and adding support for custom radio buttons. I think I will write a small article on it and provide the code once I get it working properly.

Oh, and I should note. Those looking at mine in IE will see a background color around the images. It's just because I'm using PNG24 and IE doens't support that. I'll change those to GIFs later today.

Update:

I added radio buttons to the page. It has now been fixed and tested in IE 5, 6, 7; Opera; Firefox; and Safari. This was a fun little project

http://ryanfait.com/checkbox/

"handle: function() {"
Bad coding style Ryan! Very bad! LOL
I'm only saying that because I like to crunch my scripts when I'm done with them, and your style isn't crunching friendly - but it does look cool.

Damn Safari. I've just downloaded a Windows equivalent called swift and I'll have those problems sorted eventually....

It's not bad coding! It's an organized approach to multiple functions that should be grouped accordingly. Find me a shred of evidence about why my way is bad, other than personal preference, and I'll willingly change my habbits...