单选按钮与自定义图像

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'))
});

小提琴：

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)

更新： 因为firefox还不支持输入上的伪元素，请使用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;  
}