Highlight label if checkbox is checked

by

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>

More Related Contents:

  1. CSS Not Being Responsive
  2. Change select box option background color
  3. Li item on two lines. Second line has no margin
  4. When to use the !important property in CSS [duplicate]
  5. Add a background image (.png) to a SVG circle shape
  6. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  7. Inline elements and line-height
  8. Tables instead of DIVs [duplicate]
  9. Is type=”text/css” necessary in a tag?
  10. Text overflow ellipsis on two lines
  11. Position absolute and overflow hidden
  12. Use CSS to remove the space between images [duplicate]
  13. Borders disappear in Chrome when I zoom in
  14. CSS ONLY Animate Draw Circle with border-radius and transparent background
  15. CSS – relative positioned parent div not stretching to absolute child div height
  16. How does the z-index property really work?
  17. Linking to CSS in an SVG embedded by an IMG tag
  18. How to rotate a 90 degrees?
  19. How do I make an input element occupy all remaining horizontal space?
  20. Understanding grid negative values
  21. Remove ‘:hover’ CSS behavior from element
  22. HTML + CSS: Numbered list with numbers inside of circles
  23. How to move placeholder to top on focus AND while typing?
  24. HTML/CSS set div to height of sibling
  25. Should Tables be avoided in HTML at any cost?
  26. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  27. Why would Google use a font tag?
  28. Styling the “ element in CSS?
  29. inline-block element with no text renders differently
  30. Sizing flex items on the last row

Leave a Comment