Кнопка радио с настраиваемым изображением

Question

Я использовал этот пример для флажков, но потом понял, что мне нужен один для переключателей.

Может кто-нибудь, пожалуйста, настройте этот пример для переключателей?

Change checkbox check image to custom image

HTML

<input type="radio" class="input_class_checkbox" name="role"> Coach 
<input type="radio" class="input_class_checkbox" name="role"> Athlete 

JQuery

$('.input_class_checkbox').each(function(){ 
    $(this).hide().after('<div class="class_checkbox" />'); 

}); 

$('.class_checkbox').on('click',function(){ 
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')) 
}); 

Fiddle:

http://jsfiddle.net/cn6kn/

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

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

.class_checkbox { 
    width: 36px; 
    height: 36px; 
    background: url("../images/checkbox.png"); 
} 
.class_checkbox.checked { 
    background: url("../images/checkbox-checked.png"); 
} 

Answer 1

Использование Pseudo-elements в этом случае я использую ::before (:before)

Update:так светлячок не поддерживает псевдо-элементы на входах еще, используйте adjacent sibling selectors

:root{padding: 40px} 
 

 
[name=radio]{ 
 
    display: none 
 
} 
 

 
[for^=radio]{ 
 
    position: relative; 
 
    margin: 64px 
 
} 
 

 
[for^=radio]:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: -15px; 
 
    top: -15px; 
 
    width: 32px; 
 
    height: 32px; 
 
    background: red 
 
} 
 

 
[type=radio]:checked + [for^=radio]:before{ 
 
    background: green 
 
}

<input id=radio-1 type=radio name=radio /> 
 
<label for=radio-1></label> 
 
<input id=radio-2 type=radio name=radio /> 
 
<label for=radio-2></label> 
 
<input id=radio-3 type=radio name=radio /> 
 
<label for=radio-3></label>

Или General sibling selectors

:root{padding: 40px} 
 

 
[name=radio]{ 
 
    display: none 
 
} 
 

 
[for^=radio]{ 
 
    position: relative; 
 
    margin: 64px 
 
} 
 

 
[for^=radio]:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: -15px; 
 
    top: -15px; 
 
    width: 32px; 
 
    height: 32px; 
 
    background: red 
 
} 
 

 
[id=radio-1]:checked ~ [for=radio-1]:before, 
 
[id=radio-2]:checked ~ [for=radio-2]:before, 
 
[id=radio-3]:checked ~ [for=radio-3]:before{ 
 
    background: green 
 
}

<input id=radio-1 type=radio name=radio /> 
 
<input id=radio-2 type=radio name=radio /> 
 
<input id=radio-3 type=radio name=radio /> 
 

 
<label for=radio-1></label> 
 
<label for=radio-2></label> 
 
<label for=radio-3></label>

Основная

[type=radio]{ 
 
    position: relative; 
 
    margin: 40px 
 
} 
 

 
[type=radio]:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: -15px; 
 
    top: -15px; 
 
    width: 32px; 
 
    height: 32px; 
 
    background: red 
 
} 
 

 
[type=radio]:checked:before{ 
 
    background: green 
 
}

<input type=radio />

несколько входов

[type=radio]{ 
 
    position: relative; 
 
    margin: 40px 
 
} 
 

 
[type=radio]:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: -15px; 
 
    top: -15px; 
 
    width: 32px; 
 
    height: 32px; 
 
    background: red 
 
} 
 

 
[type=radio]:checked:before{ 
 
    background: green 
 
}

<input type=radio name=radio /> 
 
<input type=radio name=radio /> 
 
<input type=radio name=radio />

Answer 2

о, извините, я неправильно понял первый раз, как насчет чего-то подобного? http://jsfiddle.net/swm53ran/126/

В значительной степени происходит то, что старый переключатель css скроется, а затем ваш css возьмет верх, но при этом сохраняет функциональность переключателя.

label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 15px; 
    font-size: 13px; 
} 

input[type=radio] { 
    display: none; 
} 

label:before { 
    content: ""; 
    display: inline-block; 

    width: 16px; 
    height: 16px; 

    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottombottom: 1px; 
    background-color: #aaa; 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
} 
.radio label:before { 
    border-radius: 8px; 
} 

input[type=radio]:checked + label:before { 
    content: "\2022"; 
    color: red; 
    font-size: 30px; 
    text-align: center; 
    line-height: 18px; 
}