Can we write CSS for a label based on the attributes of its "for" attribute's value?

37 views Asked by At

I want to write css for the labels of checkboxes based on checkbox enabled/disabled. I know the following methods, but I'm not satisfied with these.

Method1:

label[for="something"] {
   /* woohoo! */
}
  • I want to write a generalized css. I do not want to repeat for every checkbox like above.

Method2:

input[type="checkbox"]:enabled+label{ font-weight: bold; } 
  • this one directly picks the sibling and is not based on "for". I want to pick the label specifically that is associated with the checkbox and leave it alone if the label is not 'for' that checkbox.

How can I apply css based on a label's "for" attribute?

1

There are 1 answers

0
sjm On

think your after the :checked pseudo-class rather than :enabled

input[type=checkbox]:checked + label {}

The above would select a label who was the next sibling after a checked input of type checkbox