Question

我正在尝试更改标签：在选中单选按钮后，在背景图像之前更换标签，以便交换图像。我无法让它发挥作用。

以下是我所拥有的： -

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（因为代码检查CSS更好）

Answer 2

你应该这样试试 -

＆＃13;

input[type=radio] {
    display:none;
    opacity:0;
}

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(http://46.101.2.132/wp-content/themes/distinct/assets/img/unchecked.png);
}

input[type=radio]:checked + label:before {
    content: '';
    background: url(http://46.101.2.132/wp-content/themes/distinct/assets/img/checked.png);
    z-index: 999;
}

＆＃13;

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

＆＃13;

我希望我能帮助你。：）

Answer 3

你走了：

input[type=radio] {
  display: none;
}

.wpcf7-list-item-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 45px;
  margin-right: 15px;
}

.wpcf7-list-item-label:before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background: url(http://46.101.2.132/wp-content/themes/distinct/assets/img/unchecked.png);
}

input:checked + .wpcf7-list-item-label:before {
  background: url(http://46.101.2.132/wp-content/themes/distinct/assets/img/checked.png) !important;
  //display: none;
  z-index: 999;
}

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

单选按钮图像替换使用：之前

3 个答案: