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

Question

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

我希望它：

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>

查询

 $( "#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;
}

Answer 2

内联css怎么样

<label  style="background-image:url('./images/mpg2.png');" for="sort_az">A-Z</label>

Answer 3

我的解决方案：改用其他 dom 元素，编写自己的无线电行为 javascript。像这样的东西

`html

<div class="opts pdtb">
    <a href="javascript:;" class="radio" data-id="F">option1</a>
    <a href="javascript:;" class="radio" data-id="N">option2</a>
    <a href="javascript:;" class="radio" data-id="S">option3</a>
    <input type="hidden" name="type" class="fb-type" value="" />
</div>

javascript

$('.radio').click(function() {

        var t = $(this)
        t.addClass('radio-on').siblings().removeClass('radio-on')
        t.siblings('input').val(t.data('id'))

    )}