I like how during the blogger sign-up process, while choosing a template, they offer clickable thumbnails of templates that work with their radio buttons. Here’s a way to do that.
I’m going to use an unordered list, label, and radio button.
<ul id="choicesList"> <li id="li-michael"> <img src="images/michael.jpg" /><br /> <label for="radiomichael"> <input type="radio" class="radio" name="choice" value="michal" id="radiomichael" /> Michael </label> </li> <li id="li-madonna"> <img src="images/madonna.jpg" /><br /> <label for="radiomadonna"> <input type="radio" class="radio" name="choice" value="madonna" id="radiomadonna" /> Madonna </label> </li> <li id="li-elvis"> <img src="images/elvis.jpg" /><br /> <label for="radioelvis"> <input type="radio" class="radio" name="choice" value="elvis" id="radioelvis" /> Elvis </label> </li>
Notice how the
input is within the
label. I just started doing this with my latest projects. I’ve yet to hear of any reason why one shouldn’t. This helps me meet my styling objectives while giving the added benefit of of having extra clickable space to activate the radio button for browsers that support it (all but Safari to my knowledge).
The main benefit of this technique is to have border around the selected item. In this case, all the
li tags are styled to have a gray border by default. Once selected, that border turns green. If another radio becomes selected, then the first
li returns to a gray border, while the newly selected radio will have a green border.
class="on" to the
li, and I will already have in my stylesheet that
li.on will have a green border.
First there’s the “addLoadEvent” function, which allows me to have several functions load at a time. I use it all the time, not just with this particular effect.
lis to normal, resulting in a default gray border.
“highlightChoices” first calls the “clearChoices” function above, then attaches the class of “on” to selected
When someone clicks an image, “imageClick” will make sure the corresponding radio button is checked, then highlights the surrounding
li tag in green by calling “highlightChoices”.
Finally, there is “prepareChoices”, so if someone clicks the actual radio and not the image, the highlight effect still happens.
This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.
You could’ve achieved the behaviour like this:
<img src=”images/michael.jpg” alt=””/><br/>
Yeah – putting the image within the label makes great sense.
Safari doesn’t treat labels the way most other browsers do – allowing the user to click the label to select the radio. In Safari, clicking the label doesn’t do diddly. For many developers and companies, though, Safari users are not priority.