CODEWITHSUNDEEP
htmlcss
Ritankar Bhattacharjee
Ritankar Bhattacharjee

Reputation: 766

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

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

Upvotes: 0

Views: 287

Answers (2)

Noam
Noam

Reputation: 1624

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>

Upvotes: 2

Aravind Prabash
Aravind Prabash

Reputation: 443

Your label and the input should be adjacent

.radio:checked + label {
  color: red;
}
<ul>
  <li>
    <input class="radio" name="test" type="radio" />
    <label>
      Test Label
    </label>
  </li>
  <li>
    <input class="radio" name="test" type="radio" />
    <label>
      Test Label 2
    </label>
  </li>
</ul>

Upvotes: 1

Related Questions