Highlight label if checkbox is checked

Question

Is there a non-javascript way of changing the color of a label when the corresponding checkbox is checked

User · Accepted Answer

If you have   lt div gt     lt input type  checkbox  class  check-with-label  id  idinput    gt     lt label class  label-for-check  for  idinput  gt My Label lt  label gt   lt  div gt    you can do   check-with-label checked    label-for-check     font-weight  bold      See this working  Note that this won t work in non-modern browsers

User · Answer

You can t do this with CSS alone  Using jQuery you can do   HTML   lt label id  lab  gt Checkbox lt  label gt   lt input id  check  type  checkbox    gt    CSS   highlight      background yellow      jQuery      check   click function            lab   toggleClass  highlight        This will work in all browsers  Check working example at http   jsfiddle net LgADZ

User · Answer

I like Andrew s suggestion  and in fact the CSS rule only needs to be    checked   label      font-weight  bold      I like to rely on implicit association of the label and the input element  so I d do something like this    lt label gt      lt input type  checkbox   gt      lt span gt Bah lt  span gt   lt  label gt    with CSS    checked   span       font-weight  bold      Example  http   jsfiddle net wrumsby vyP7c

User · Answer

This is an example of using the  checked pseudo-class to make forms more accessible  The  checked pseudo-class can be used with hidden inputs and their visible labels to build interactive widgets  such as image galleries  I created the snipped for the people that wanna test    x000D   x000D  input type checkbox    label   x000D    color   ccc  x000D    font-style  italic  x000D     x000D  input type checkbox  checked   label   x000D    color   f00  x000D    font-style  normal  x000D     x000D   lt input type  checkbox  id  cb name  name  cb name  gt   x000D   lt label for  cb name  gt CSS is Awesome lt  label gt   x000D   x000D   x000D

[html] Highlight label if checkbox is checked

Examples related to html

Examples related to css