CSS Houdini experimental showcase by @iamvdo
Support: Chrome/Opera/Edge
Code mostly from https://github.com/MatteoWebDesigner/css-paint-worklet
.Checkbox {
background-color: #555;
transition: --checkbox-tick-color 500ms, background-color 500ms;
}
@supports (background: paint(id)) {
.is-loaded .Checkbox {
-webkit-appearance: none;
background-image: paint(checkbox);
}
}
.Checkbox:hover {
--checkbox-tick-color: rgba(255,255,255,.25);
}
.Checkbox:checked {
--checkbox-tick-color: white;
background-color: deeppink;
}