<form>
<div>
<input type="checkbox" id="label-1" aria-labelledby="label-1-label" />
<label for="label-1" id="label-1-label">
Custom Checkbox 1
</label>
</div>
<div>
<input type="checkbox" id="label-2" aria-labelledby="label-2-label" />
<label for="label-2" id="label-2-label">
Custom Checkbox 2
</label>
</div>
<div>
<input type="checkbox" id="label-3" aria-labelledby="label-3-label" />
<label for="label-3" id="label-3-label">
Custom Checkbox 3
</label>
</div>
</form>
[type="checkbox"] {
/* Visually Hidden Styles */
/*
The following styles hide the element
from the screen, but is still available
to screen reader and keyboard users.
*/
position: fixed;
bottom: 100%;
right: 100%;
clip: rect(0 0 0 0);
border: 0;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
}
[type="checkbox"] + label {
display: flex;
position: relative;
}
[type="checkbox"] + label::before {
content: '';
display: inline-block;
height: 1.125em;
width: 1.125em;
border: black 1px solid;
box-sizing: border-box;
margin-right: 0.5rem;
}
[type="checkbox"]:checked + label::after {
content: '';
display: block;
height: 0.625em;
width: 0.25em;
transform: rotate(45deg);
border-right: 0.125em green solid;
border-bottom: 0.125em green solid;
position: absolute;
top: 0.125em;
left: 0.375em;
}
[type="checkbox"]:focus + label::before {
box-shadow:
0 0 0 2px white,
0 0 0 4px dodgerblue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.