Разный стиль для каждого переключателя

Question

Я пытаюсь стилизовать эти 3 переключателя для моего сайта, достаточно просто, за исключением того, что мне нужно, чтобы все они выглядели по-другому. Например, у вас есть опция paypal, другая alertpay и другая проверка, каждая с другим изображением. Это доказывает жесткость, поскольку я пытаюсь много разных учебников, и все это показывает мне, как просто изменить его для одного, но потом не быть в состоянии для других.

Это один из учебников я пытаюсь следовать - http://screwdefaultbuttons.com/

Может кто-нибудь дать мне какие-либо идеи или ссылки на где-то, что может помочь мне. Спасибо

Answer 1

Да, определить классы в CSS с некоторой фантазии форматирования, как:

.button1 { 
    width: 19px; 
    height: 25px; 
    padding: 0 5px 0 0; 
    background: url(checkbox.jpg) no-repeat; 
} 

.button2 { 
    width: 19px; 
    height: 25px; 
    padding: 0 5px 0 0; 
    background: url(somethingelse.jpg) no-repeat; 
} 

А затем положить классы в HTML, как:

<input type="radio" name="radio1" class="button1" /> 

Answer 2

Вы должны позвонить по номеру screwDefaultButtons для индивидуального выбора различных изображений по каждому из них.

$('#radio1').screwDefaultButtons({ 
     checked: "url(images/radio_Checked1.jpg)", 
     unchecked: "url(images/radio_Unchecked1.jpg)", 
     width: 85, 
     height: 85 
}); 

$('#radio2').screwDefaultButtons({ 
     checked: "url(images/radio_Checked2.jpg)", 
     unchecked: "url(images/radio_Unchecked2.jpg)", 
     width: 85, 
     height: 85 
}); 

BTW, что ссылка «screwDefaultButtons» не учебник, но использование этого JQuery плагин для пользовательских кнопок.