Web developers could style form elemets with CSS pseudo class & pseudo elements and other modern CSS properties.
HTML structure
<div class="checkbox-set">
<input id="my-checkbox" type="checkbox" name="checkbox[]" value="0" />
<label class="checkbox-set__label" for="my-checkbox"></label>
</div>
Style Customization
Apply accent-color to <input />'s style.
<style>
.checkbox-set {
--size: 1.25em;
--border-radius: 2px;
--mask-checkmark: path('m8.229 14.062-3.521-3.541L5.75 9.479l2.479 2.459 6.021-6L15.292 7Z');
--duration: 100ms;
--timing-function: cubic-bezier(.4,0,.2,1);
/* normal */
--accent-color: var(--default-accent-color, rgba(42 108 246));
--border-color: var(--default-border-color, rgba(131 138 146));
--background-color: var(--default-background-color, rgba(255 255 255));
--checkmark-color: var(--default-checkmark-color, rgba(255 255 255));
/* disabled */
--border-color--disabled: var(--default-border-color--disabled, rgba(178 185 192));
--background-color--disabled: var(--default-background-color--disabled, rgba(255 255 255));
--checkmark-color--disabled: var(--default-checkmark-color--disabled, rgba(178 185 192));
}
.checkbox-set__label {
--checkmark-opacity-normal: 0;
--checkmark-opacity-active: 1;
--checkmark-opacity: var(--checkmark-opacity-normal);
}
.checkbox-set input:checked~.checkbox-set__label {
--border-color: var(--accent-color);
--background-color: var(--accent-color);
--checkmark-opacity: var(--checkmark-opacity-active);
}
.checkbox-set input:not(:disabled):focus-visible~.checkbox-set__label {
--border-color: var(--accent-color);
}
[inert] .checkbox-set input~.checkbox-set__label,
.checkbox-set input:disabled~.checkbox-set__label {
--border-color: var(--border-color--disabled);
--background-color: var(--background-color--disabled);
--checkmark-color: var(--checkmark-color--disabled);
}
.checkbox-set{position:relative;inline-size:var(--size);aspect-ratio:1/1;overflow:hidden;}
.checkbox-set input{position:absolute;top:-100%;outline:0 none;}
.checkbox-set__label{position:relative;inline-size:100%;block-size:100%;background-color:var(--background-color);display:block;border-radius:var(--border-radius);overflow:hidden;transition:background-color var(--duration) var(--timing-function);will-change:background-color;}
.checkbox-set__label::before{position:absolute;inset-inline-start:0;inset-block-start:0;content:'';inline-size:100%;block-size:100%;border-radius:var(--border-radius);box-shadow:inset 0 0 0 2px var(--border-color);box-sizing:border-box;transition:box-shadow var(--duration) var(--timing-function);will-change:box-shadow;}
.checkbox-set__label::after{position:absolute;inset-inline-start:0;inset-block-start:0;content:'';inline-size:100%;block-size:100%;background-color:var(--checkmark-color);clip-path:var(--mask-checkmark);transition:opacity var(--duration) var(--timing-function);will-change:opacity;opacity:var(--checkmark-opacity);}
@media (hover: hover) {
.checkbox-set input:not(:disabled)~.checkbox-set__label:hover {
--border-color: var(--accent-color);
}
}
@media (prefers-color-scheme: dark) {
.checkbox-set {
--default-accent-color: rgba(75 168 248);
--default-border-color: rgba(131 138 146);
--default-background-color: rgba(0 0 0);
--default-border-color--disabled: rgba(131 138 146);
--default-background-color--disabled: rgba(44 54 63);
}
}
</style>