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