Question

当使用单选按钮在CF7表单上单击选项时，我遇到了使背景颜色发生变化的问题。基本上，当选中“选中”选项时，我需要更改背景颜色。因此，当单击选项1时，它需要保持红色（例如），直到单击选项2。我似乎无法选择标签来做到这一点。

HTML

<span class="wpcf7-form-control-wrap ra-kies-onderdeel">
  <span class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
      <label>
        <input type="radio" name="ra-kies-onderdeel" value="Roetfilter">
        <span class="wpcf7-list-item-label">Option 1</span>
      </label>
    </span>
    <span class="wpcf7-list-item last">
      <label>
        <input type="radio" name="ra-kies-onderdeel" value="Katalysator">
        <span class="wpcf7-list-item-label">Option 2</span>
      </label>
    </span>
  </span>
</span>

CSS

input[type="radio"] {
    display: none;
}
label {
    display: block;
    width: 100%;
    background-color: #ddd;
    padding: 16px;
    margin-bottom: 20px;
    cursor:pointer;
    font-family: Arial;
    font-size: 16px;
}

http://codepen.io/anon/pen/XNYjQJ

遗憾的是，更改HTML不是一个选项，我宁愿不使用jQuery。

谢谢！

Answer 1

我想通了，用以下的CSS解决了它：

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

.wpcf7-list-item-label {
  display: block;
  width: 100%;
  background-color: #ddd;
  padding: 16px;
  margin-bottom: 20px;
  cursor: pointer;
  font-family: Arial;
  font-size: 16px;
}

input[type=radio]:checked + .wpcf7-list-item-label {
  background-color: red;
}

Answer 2

Image of radiobuttons with changed colors

此技术使用绑定到隐藏label元素的input元素，接收:checked状态将更改:before伪元素的外观：

CSS：

/* COMMON RADIO AND CHECKBOX STYLES  */
input[type=radio],
input[type=checkbox]{
/* Hide original inputs */
visibility: hidden;
position: absolute;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before{
height:12px;
width:12px;
margin-right: 2px;
content: " ";
display:inline-block;
vertical-align: baseline;
border:1px solid #777;
}
input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{
background:gold;
}

/* CUSTOM RADIO AND CHECKBOX STYLES */
input[type=radio] + label:before{
border-radius:50%;
}
input[type=checkbox] + label:before{
border-radius:2px;
 }

HTML：

<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label>
<input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>

<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label>
<input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label>

我希望这会有所帮助：）

检查联系表格7时的无线电标签背景颜色

2 个答案: