问题描述:

I want to give my upper label a background if the radio button is checked.

I do not want to give the span a background, because the background needs to include the radio button.

<label>

<input type="radio" checked="checked">

<span>text</span>

</label>

See my complete code here: https://jsfiddle.net/kL2h46x5/

How can I fix that?

网友答案:

There is no way to select the parent of the input element. But you could rearrange your markup to achieve the desired effect:

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/

网友答案:

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

Use

 :checked + span {
      background-color: #f10;
 }
相关阅读:
Top