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

我想要使用buttonset的单选按钮（如果除了buttonset以外还有其他选项，很乐意接受它，但我只假设你必须使用它），它们具有独特的图标背景，独特的每个按钮的图标。每个单选按钮的自定义背景图像

我希望它：

有没有单选按钮图标
有翻转效果
有一个图标为背景
有检查时不同的风格，徘徊

我现在的代码是

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，并为每个人制作背景图片，但没有任何区别。

任何人都知道如何为每个单选按钮

来源

2013-09-24 Flashpacker

不要试图用输入我的朋友一起玩！ :) – Alvaro

http://stackoverflow.com/questions/11256992/radio-button-background-image – Jacob

只是一个建议。对于多行代码，将它们缩进4个空格（或），使用按钮栏中的“{}”按钮将其格式化为代码块。 – Harry

-1

创建自定义的背景图片我的解决方案：使用其他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')) 

    )}

来源

2013-09-24 09:37:48

对不起，什么是行为javascript？ – Flashpacker

什么内联CSS CSS的

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

来源

2013-09-24 09:38:05 Source

实例的作品：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; 
}

来源

2013-09-24 11:34:03 Jacob

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

回答

相关问题