CSS/HTML: How do I change the color of the check mark within the checkbox input?

Question

How do I change the color of the check mark within an HTML checkbox input?

Answer 1

You can imitate a check box with another element and set the background color as desired.

You can get a little fancier by using ::before or after

You can extend this, by using background image or a svg sprite in the ::after tag (see https://stackoverflow.com/a/19255455/87520)

I haven't tried to make it perfect, just to demonstrate the concept. As you can see, the background color is green, no images, no libraries involved; minimal js.