Looking to create radio buttons with buttonset that have unique icon backgrounds for each button. Open to options other than buttonset if available, but assuming it needs to be used.
Key requirements:
- No radio button icon
- Rollover effect
- Icon background
- Different styles for checked and hovered states
Here is the current code:
HTML:
<div id="new_sort_options">
<input type="radio" name="new_sort" id="sort_az" /><label for="sort_az">A-Z</label>
<input type="radio" name="new_sort" id="sort_popular" /><label for="sort_popular">Popular</label>
</div>
JQUERY
$( "#new_results_sort" ).buttonset();
CSS
#new_sort_options .ui-button {
background-color:#FFFFFF;
background-image:url('../images/mpg2.png');
background-repeat:no-repeat;
border-radius:4px;
margin:0;
}
Although the background image works, it is the same for all radio buttons. Tried assigning separate ID's and background images, but no luck.
Any suggestions on how to set custom background images for each radio button?