checkbox color in Microsoft Edge - microsoft-edge

Question

I'm working on porting my Chrome extension to Edge for wider availability - everything seems to run fine, except for the styling of the checkboxes. In Chrome, the default styling is a blue color, which works well for the look of the extension, but now the checkbox is grey in Edge. I've tried a few different ways to set the color (in JS styling, HTML, CSS) and nothing seems to work - anyone have experience with styling the color of a checkbox in Edge?

Answer 1

Setting the color of the checkbox alone may not work. I recommend you to try to design a custom checkbox.
This is a simple example:
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 17px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<h1>Custom Checkboxes</h1>
<label class="container">
check value
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
You can also modify its size or position according to your own requirements. For more details, you could also refer to How TO - Custom Checkbox.

Answer 2

Starting with version 93, Edge supports the accent-color CSS property.
The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
Browsers that support accent-color currently apply it to the following HTML elements:
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
It can be used as follows:
input[type="checkbox"] {
accent-color: dodgerblue;
}
<input id="clickme" type="checkbox" checked><label for="clickme">Click Me</label>