我已经将此示例用于复选框,但后来我意识到我需要一个用于单选按钮。
有人可以为单选按钮定制这个例子吗?
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
j查询
$('.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 :
或者是否有为单选按钮和复选框使用自定义图像的一站式解决方案。我搜索了一些,但他们都提供自己的皮肤。
在我自定义包含背景图像的示例中,如下所示,但它不适用于单选按钮,无论我单击另一个单选按钮,所有单选按钮都保持选中状态。
.class_checkbox {
width: 36px;
height: 36px;
background: url("../images/checkbox.png");
}
.class_checkbox.checked {
background: url("../images/checkbox-checked.png");
}
最佳答案
使用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>
: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 />
关于javascript - 带有自定义图像的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27991071/