Skip to content

Checkboxes

<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>

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.