html - 单选按钮 css 上的背景图像

Question

我在单选按钮上添加背景图片。但我的问题是图像未选中或单击单选按钮(背景图像)。

这是我的代码

.form-group input[type="radio"] {
  display: none;
}
.gender input[type="radio"] + label::after {
  background:url('img/male.png') no-repeat -7px -81px;
  width: 28px;
  height: 56px; }
.gender input[type="radio"]:checked + label::before {
  background:url('img/m-f-icon.png') no-repeat;
  width: 28px;
  height: 56px;
  display: inline-block;
  position: relative;
  content: ' ';
  margin-right: 10px;
  cursor: pointer;
  background-position-x: -45px;
}

<div class="form-group gender">
  <label class="control-label col-xs-2">I'm a</label>
  <div class="col-xs-1">
    <input type="radio" class="male" name="genderRadios" value="male">
    <label class="radio-inline gender"></label>                            
  </div>
  <div class="col-xs-1">
    <input type="radio" class="female" name="genderRadios" value="female">
    <label class="radio-inline gender"></label>                            
  </div>
</div>

请告诉我任何解决方案。

Answer 1

请在下面找到我放在一起的演示，这是您应该使用的正确结构，并在与相关单选按钮匹配的每个标签上指定适当的 for。您可以为您选择的背景图片切换背景颜色。

JSFiddle:

https://jsfiddle.net/kdrh56md/