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

Question

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

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

请在此处查看我的完整代码：https://jsfiddle.net/kL2h46x5/

我该如何解决？

Answer 1

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

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/

Answer 2

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

使用

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