Home How to change the colour of the label of the checked radio button with only css

Questions

How to change the colour of the label of the checked radio button with only css

February 3, 2022

I want to change the colour of the label when that specific radio button is checked, but I am unable to do it, this is my code

html

<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article class="civil-sub-law-type-nav">
    <ul class="civil-sub-law-type-ul">
        <li class="civil-sub-law-type-list">
            <label for="arb" class="civil-sub-law-type-label">Arbitration Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="landacq" class="civil-sub-law-type-label">Land Acquisation Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="comcourt" class="civil-sub-law-type-label">Comercial Court Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="others" class="civil-sub-law-type-label">Others</label>
        </li>
    </ul>
</article>

css

.civil-sub-law-type:checked ~ .civil-sub-law-type-label {
  background-color: red;
}

Please suggest me what should I do

>Solution :

First, you have to account for each input-label pair specifically, typically by the assigned id.

Second, you have to use ~ * rather than just ~, since the labels are not sibling elements of the checkboxes, but descendants of such siblings.

#arb:checked ~ * label[for="arb"] {
  background-color: red;
}

#landacq:checked ~ * label[for="landacq"] {
  background-color: red;
}

#comcourt:checked ~ * label[for="comcourt"] {
  background-color: red;
}

#others:checked ~ * label[for="others"] {
  background-color: red;
}

<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article class="civil-sub-law-type-nav">
    <ul class="civil-sub-law-type-ul">
        <li class="civil-sub-law-type-list">
            <label for="arb" class="civil-sub-law-type-label">Arbitration Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="landacq" class="civil-sub-law-type-label">Land Acquisation Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="comcourt" class="civil-sub-law-type-label">Comercial Court Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="others" class="civil-sub-law-type-label">Others</label>
        </li>
    </ul>
</article>

A bit different and more scalable method, counting the elements rather than using the ids. Also grouped the selectors together since they all use the same color.

.civil-sub-law-type:nth-child(1):checked ~ 
    * .civil-sub-law-type-list:nth-child(1) > label,
.civil-sub-law-type:nth-child(2):checked ~ 
    * .civil-sub-law-type-list:nth-child(2) > label,
.civil-sub-law-type:nth-child(3):checked ~ 
    * .civil-sub-law-type-list:nth-child(3) > label,
.civil-sub-law-type:nth-child(4):checked ~ 
    * .civil-sub-law-type-list:nth-child(4) > label {
  background-color: red;
}

<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article class="civil-sub-law-type-nav">
    <ul class="civil-sub-law-type-ul">
        <li class="civil-sub-law-type-list">
            <label for="arb" class="civil-sub-law-type-label">Arbitration Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="landacq" class="civil-sub-law-type-label">Land Acquisation Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="comcourt" class="civil-sub-law-type-label">Comercial Court Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="others" class="civil-sub-law-type-label">Others</label>
        </li>
    </ul>
</article>