пользовательское фоновое изображение для каждой кнопки радиосвязи

Question

Я хочу, чтобы с помощью кнопок набора кнопок с переключателями (если есть другой вариант, кроме набора кнопок, он рад развлечь его, но я просто предполагаю, что вы должны его использовать), которые имеют фон значка, уникальный значок каждой кнопки.

Я хочу его:

1. не имеет никакого значка кнопки радио
2. Have опрокидывания эффекта
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 он работает, но это то же самое фоновое изображение для всех переключателей. Я попытался сделать отдельный идентификатор для каждого из них и сделать фоновое изображение для каждого, но это не имело никакого значения.

Кто знает, как создавать собственные фоновые изображения для каждой кнопки радио

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

    )} 

Answer 2

насчет встроенного CSS

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

Answer 3

примере 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; 
}