html - 使用 :before 替换单选按钮图像

Question

我正在尝试更改 label:before background image 一旦单选按钮被选中，以便它交换图像。我无法让它工作。

这是我所拥有的:-

HTML

<span class="wpcf7-form-control-wrap your-person">
  <span class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
      <label>
        <input type="radio" name="your-person" value="Jobs">&nbsp;<span class="wpcf7-list-item-label">Jobs</span>
      </label>
    </span>
    <span class="wpcf7-list-item last">
      <label>
        <input type="radio" name="your-person" value="Employees">&nbsp;<span class="wpcf7-list-item-label">Employees</span>
      </label>
    </span>
  </span>
</span>

CSS

input[type=radio] {
        display:none;
    }

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 45px;
    margin-right: 15px;
}

label:before {
    content: "";
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background: url(../img/unchecked.png);
}

label:checked {
    background: url(../img/checked.png) !important;
    display: none;
    z-index: 999;
}

最好不要更改标记，因为它来自 Contact Form 7 插件。

我做了一个 JSFIDDLE .

Answer 1

你已经接近了，但还没有到位。

标签不能有:checked，这只适用于单选按钮和复选框。

您必须修改它在输入后选择一个跨度，如下所示:

input[type=radio] + span:before {
    background-image: url('./unchecked');
}
input[type=radio]:checked + span:before {
    background-image: url('./checked');
}

看这个codepen (因为 codepen 比检查 CSS 好很多)