Checkboxes

HTML

<script src="/src/js/checkboxes.js"></script>

<label class="l-cluster" style="--cl-gap: 4px;">
  <div class="checkbox">
    <input type="checkbox" />
    <div class="animated-checkbox">
      <div class="animated-fill"></div>
    </div>
  </div>

  <div style="margin: 0;">Make your selection</div>
</label>

SCSS

.checkbox {
  position: relative;
}

.checkbox input[type=checkbox] {
  position: absolute;
  z-index: 2;
  inset: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.animated-checkbox {
  position: relative;
  border: 2px solid hsl(210deg, 14%, 66%);
  border-radius: 4px;
  margin-right: 8px;
  width: 18px;
  height: 18px;
}

.animated-checkbox {
  position: relative;
  border: 2px solid hsl(210deg, 14%, 66%);
  border-radius: 4px;
  margin-right: 8px;
  width: 18px;
  height: 18px;
}

.animated-fill {
  position: absolute;
  z-index: 1;
  inset: 2px;
  background: hsl(230deg, 100%, 69%);
  border-radius: 2px;
}

This pattern demonstrates how to customize the appearance of form inputs like checkboxes.

By adding the CSS property appearance: none, the browsers default styles are removed. A side-effect of adding this property is we are given access to the ::before and ::after psuedo-elements, which we can use to customize the appearance.