Я хочу иметь радиокнопки с помощью набора кнопок (если есть еще один параметр, отличный от набора кнопок, с удовольствием развлекать его, но я просто предполагаю, что вам нужно его использовать), у которого есть значок, уникальный значок для каждой кнопки.
Я хочу:
Текущий код, который у меня есть, это
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, он работает, но это одно и то же фоновое изображение для всех переключателей. Я попытался сделать отдельный идентификатор для каждого из них и сделать фоновое изображение для каждого, но это не имело никакого значения.
Кто-нибудь знает, как создавать собственные фоновые изображения для каждого переключателя
Пример 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;
}
Как насчет встроенного css
<label style="background-image:url('./images/mpg2.png');" for="sort_az">A-Z</label>
мое решение: вместо этого используйте другой элемент dom, напишите свое собственное поведение JavaScript 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'))
)}