css - 在 Contact Form 7 中选中时的单选标签背景颜色

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