html - 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

您必须禁用 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/