Why cannot change checkbox color whatever I do? [duplicate]

January 6, 2023 by Tarik

You can now simply use the accent-color property :

#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}

<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked />
<input id="cb3" type="checkbox" checked />

Note : as this is a new feature, it is not supported by all browsers, but it is still useful

Here is a compatibility link