Can I Style a Label Based on its Checkbox\'s State Using Only CSS?

Styling Labels Based on Checkbox Status without JavaScript

Question:

Is it possible to modify the styling of a label based on the checked state of its corresponding checkbox without resorting to JavaScript?

Answer:

Yes, it is possible using the adjacent sibling combinator in CSS.

Explanation:

By utilizing the adjacent sibling combinator ( ), you can target elements that immediately follow a specified element. In this case, we use it to style labels (.label-for-check) that are adjacent to checked checkboxes (.check-with-label:checked).

Example:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

<div>
  <input type="checkbox" class="check-with-label"><p>In this example, when the checkbox with the ID "idinput" is checked, the "My Label" label that follows it will become bold. This is because the label meets the following conditions:</p>
<ul>
<li>It is adjacent to a checked checkbox due to the   combinator.</li>
<li>It matches the .label-for-check class selector.</li>
</ul>
</div>

The above is the detailed content of Can I Style a Label Based on its Checkbox\'s State Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!