Toggle something on a Web page without JS

You can build temporary/permanent states with CSS-only toggles using checkboxes, labels, and sibling selectors.

Labels and inputs

<label for="id"> activates the related <input> and lets checkbox state model UI without JavaScript.

:checked state

Use sibling selectors like ~ to style elements only while an input is checked.

.key~.lock{
  color: red;
}

The CSS-only pattern works for navigation and overlays when paired with good HTML structure.

Also check: