如果选中无线电，则标记背景

Question

如果单选按钮被选中，我想给我的上部标签一个背景。我不想给跨度一个背景，因为背景需要包括单选按钮。

<label>
   <input type="radio" checked="checked">
   <span>text</span>
</label>

在这里查看我的完整代码：https://jsfiddle.net/kL2h46x5/

我该如何解决？

Answer 1

https://jsfiddle.net/kL2h46x5/6/

使用

 :checked + span {
      background-color: #f10;
 }

Answer 2

无法 select 输入元素的父元素。但是您可以重新排列标记以达到预期效果：

HTML:

<input class="radio-gender bestelling-type" type="radio" checked="checked" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
<label class="type-bestelling" for="noCheck">
    <span class="type-bestelling-particulier">Particulier</span>
</label>

<input class="radio-gender bestelling-type" type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label class="type-bestelling" for="yesCheck">
    <span class="type-bestelling-zakelijk">Zakelijk</span>
</label>

CSS:

label.type-bestelling {background-color: #f1f1f1; margin-right:10px;}

input:checked+label {
    background:red;
}

https://jsfiddle.net/kL2h46x5/9/

如果选中无线电，则标记背景

Label background if radio is checked

css

radio-button