Question

我希望使用按钮组的单选按钮（如果除了按钮组之外还有另一个选项，我很乐意接受它，但我只是假设你必须使用它），它有一个图标背景，每个按钮都有一个独特的图标。

我希望它：

没有单选按钮图标
有翻转效果
以图标为背景
在检查和悬停时有不同的风格

我目前的代码是

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

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'))

    )}

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

3 个答案: