jquery - 每个单选按钮的自定义背景图像

Question

我想要使用 buttonset 的单选按钮(如果除了 buttonset 之外还有其他选项，很高兴接受它，但我只是假设你必须使用它)具有图标背景，每个按钮都有唯一的图标。

我希望它:

1. 没有单选按钮图标
2. 有滚动效果
3. 有一个图标作为背景
4. 选中和悬停时有不同的样式

我目前的代码是

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; 
}

现在，当我将此背景图像放在 css 中时，它可以正常工作，但它是所有单选按钮的相同背景图像。我尝试为每个人制作一个单独的 ID，并为每个人制作一个背景图片，但没有任何区别。

任何人都知道如何为每个单选按钮创建自定义背景图像

Answer 1

有效的 CSS 示例:http://jsfiddle.net/dmdBh/1/

HTML:

<input type="radio" id="radio1" name="group"/>
<label for="radio1"></label>
<input type="radio" id="radio2" name="group"/>
<label for="radio2"></label>

CSS:

input[type="radio"]{
    display:none;
}

input[type="radio"] + label
{
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}