0

Is it Possible to Style the Label based on if input is checked or not with CSS or am I stuck using javascript?

<label class="filterButton"> <input name="RunandDrive" type="checkbox" value="1"> </label>
Calixte Simeon
  • 82
  • 9
  • Similar issue was already addressed here: [How to style a label depending on checkbox value?](https://stackoverflow.com/questions/31003909/how-to-style-a-label-depending-on-checkbox-value) – Marta G. Dec 16 '17 at 19:37

2 Answers2

0

In order to style label with "checked" checkbox first of all you have to set up an ID for the input"Checkbox" id="qid" and put the for label this code for="qid" to guid the label for this checkbox input

That's all!

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 
<input name="RunandDrive" type="checkbox" value="1" id="qid">
<label class="filterButton" for="qid"> Thsis will be styled</label>
Liam
  • 6,517
  • 7
  • 25
  • 47
0

You can use the :checked pseudo-element to check wither the check box is checked or not. This works for the radio button and the check box.

The problem is that you want to select the parent of an element, but there is actually no parent selector in css. A work around is to put the label element after ( or before ) the input element and use the appropriate selector. In this case I put the label element after the input element and use the + selector.

input[type=checkbox]+label {
  background-color: green;
}

input[type=checkbox]:checked+label {
  background-color: red;
}
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">Click to turn RED!</label>

But if you really must have the input element as a child of the label element, then yes, you have to stick to JavaScript.