我正在尝试使用两个不同的图像自定义单选按钮。一个如果没有检查,一个检查。 html是
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="options" value="1"/>1
</label>
</div>
</div>
我正在尝试使用以下 CSS 但没有结果。
.radio input[type=radio]:not(old){
width : 28px;
margin : 0;
padding : 0;
opacity : 0;
}
.radio input[type=radio]:not(old) {
display : inline-block;
background : url("../../images/empty-checks.png") no-repeat 0 0;
}
.radio input[type=radio]:not(old):checked{
background-position : 0 -48px;
background : url("../../images/checks.png") no-repeat 0 0;
}
我更喜欢无需修改 html 的解决方案。
最佳答案
您必须禁用 radio 输入的默认标记:
input[type=radio] {
height: 28px;
width: 28px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
}
您可能还想使用 1 个图像作为 sprite,而不是 2 个。
看看这个 fiddle :https://jsfiddle.net/wietsedevries/gsz1bud4/3/
关于html - bootstrap3中使用图像的自定义单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37573876/