CSS对输入的影响[type =“ radio”]：已检查为无效

Question

我有一个带有多个收音机和复选框的表格。我试图使单选框和复选框看起来像一个按钮（我已经完成了）。我需要单选框/复选框在“选中”时喜欢一个按钮。这是HTML-

    <span class="wpcf7-form-control wpcf7-radio radioBtn">
      <span class="wpcf7-list-item first">
       <label>
          <input type="radio" name="gender" value="Male">
          <span class="wpcf7-list-item-label">Male</span>
       </label>
      </span>

    <span class="wpcf7-form-control wpcf7-radio radioBtn">
      <span class="wpcf7-list-item first">
       <label>
          <input type="radio" name="gender" value="Male">
          <span class="wpcf7-list-item-label">Male</span>
       </label>
      </span>

      <span class="wpcf7-list-item last">
       <label>
          <input type="radio" name="gender" value="Female">
          <span class="wpcf7-list-item-label">Female</span>
       </label>
      </span>
    </span>

我的HTML正常工作。但是我无法使用CSS选择器应用效果。以下是CSS-

.radioBtn input[type='radio']:checked + label {
  background-color: #793B52 !important;
  color: #fff !important;
}

我在Wordpress中使用联系表格7，因此我的无线电元素被包裹在“ span”和“ label”元素周围。所以我尝试将效果应用到span元素而不是标签上-

.radioBtn input[type='radio']:checked + span {
  background-color: #793B52 !important;
  color: #fff !important;
}

部分起作用。颜色仅应用于输入的文本。不是整个元素，下面的图片-

我在做什么错？请指教。谢谢！