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

If you use b-form-checkbox and you will find css of mark is svg like that...

.custom-checkbox
.custom-control-input:checked
~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath **fill='%23000'** d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");

It's drawn by svg, so you can change coordinate to modify mark or change fill to change mark color.