Search code examples
htmlcss

Highlight label if checkbox is checked


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


Solution

  • Use the adjacent sibling combinator:

    .check-with-label:checked + .label-for-check {
      font-weight: bold;
    }
    <div>
      <input type="checkbox" class="check-with-label" id="idinput" />
      <label class="label-for-check" for="idinput">My Label</label>
    </div>