title: CSS 'checkbox hack' to set body background color
body: <p><strong>This question is purely hypothetical; I don't intend to use the methods discussed here. The intention is to learn more about CSS selectors.</strong></p>
  <p>Consider an HTML page containing a checkbox. If the checkbox is selected, the background of the <strong>body element</strong> is red. Otherwise it is blue.</p>
  <p>Is this possible to achieve using currently usable selectors in CSS?</p>
  <p>Here are the constraints:</p>
  <ul>
  <li>No javascript <em>anywhere</em></li>
  <li>No divs overlaying the entire page. It must be the body element's background property.</li>
  <li>No <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has#Browser_compatibility" rel="nofollow noreferrer">future</a> CSS selectors like <code>:has</code>. Ideally the method should be demonstrable in a Codepen.</li>
  </ul>