Custom Checkbox CSS

Unknown

Custom Checkbox CSS

Unknown

This snippet can be applied to the native checkboxes generated by the Checkbox form control and make it so aesthetically pleasing that your UI team will stop bugging you about the native checkboxes.

/* CHECKBOX */
fieldset {
margin-bottom: 14px;
}

.field {
display: flex;
align-items: center;
margin-bottom: 14px;
}

.field:last-child {
margin: 0;
}

/* Removing the native appearance */

[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

/* Giving not checked state a new appearance */

[type=checkbox] {
width: 16px;
height: 16px;
border: solid 1px #cccccc;
margin-right: 8px;
position: relative;
border-radius: 4px;
}

/* Giving checked state a new appearance */

[type=checkbox]:checked::before {
content: "";
width: 12px;
height: 12px;
position: absolute;
top: 1px;
left: 1px;
border-radius: 3px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=21 height=21 viewBox=0 0 21 21 fill=none%3E%3Crect x=0.653809 y=0.702637 width=20 height=20 rx=2 fill=%234DA1A8/%3E%3Cpath fill-rule=evenodd clip-rule=evenodd d=M6.47491 10.6434C5.7772 9.91085 4.66087 11.0272 5.39346 11.7249C6.30048 12.6668 7.2075 13.6436 8.1494 14.5506C8.56802 14.9343 8.88199 14.9343 9.26573 14.5506L15.9288 7.92239C16.6265 7.1898 15.5451 6.07347 14.8125 6.80606L8.74245 12.8761L6.47491 10.6434Z fill=white/%3E%3C/svg%3E");
background-size: 12px;
}

/* CHECKBOX */
[i]edited by James on 6/7/2021[/i]