<div class="wrapper">
    <article class="flow">
      <h1>Custom toggle</h1>
      <figure class="callout">
        <p>We can use a <strong>subsequent selector</strong> along with a `<code>:checked</code>` pseudo class to create a pure CSS switch element.</p>

      <label class="toggle" for="toggle-element">
        <span class="toggle__label">Our custom toggle switch</span>
        <input type="checkbox" role="switch" class="toggle__element" id="toggle-element" />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
:checked ~ .toggle__decor {
  background: rebeccapurple;

:checked ~ .toggle__decor .toggle__thumb {
  transform: translateX(var(--metric-toggle-thumb-size)) rotate(270deg);

/* Note the rest of the CSS for this toggle is pulled in externally */

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.