bootstrap3中的自定义单选按钮使用图像

Question

我正在尝试使用两个不同的图像自定义单选按钮。一个如果没有检查，一个检查。 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。

Answer 1

您必须禁用无线电输入的默认标记：

input[type=radio] {
  height: 28px;
  width: 28px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
}

您也可能想要使用1张图像作为精灵，而不是2

看看这个小提琴：https://jsfiddle.net/wietsedevries/gsz1bud4/3/