custom checkbox design code example

Example: custom checkbox in css

/* Custom CSS Checkbox */
<input type="checkbox">
<label>
  <span class="custom-checkbox"></span> my checkbox
</label>

[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

.custom-checkbox {
    min-width: 0.75em;
    min-height: 0.75em;
    margin-right: 0.75em;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: inline-block;
}

[type="checkbox"]:checked+label .custom-checkbox {
    border-color: blue;
    background: blue;
    box-shadow: inset 0 0 0 2px white;
}