css - 如果选中 radio ，则标记背景

Question

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

<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/