Microsoft Edge Displaying Incrorrect Colors for CSS/HTML.

Question

Edge:

Chrome:

How do I fix this, reset microsoft Edge, disabled extension, went into safe mode, disabled dark mode. Enabled Forced colors, disabled, enabled/disabled hardware acceleartion. Updated Edge.

Windows 11.

Winver 22621.1105

Edge version

Version 109.0.1518.55 (Official build) (64-bit)

See https://colab.research.google.com/notebooks/forms.ipynb#scrollTo=ig8PIYeLtM8g for example. Is this just my browser.

Answer 1

Hi @Arctic A,

Actually, it is just a different "behavior". The grey checkbox and range bar is by design in Edge, no matter how you set the appearance (dark mode or something). I don't think it is an "issue", but if you want to style the colors to unify their design, here's a solution for you: accent-color.

Code example:

input[type="checkbox"] {

accent-color: rgb(0 117 255);

}

It changes the checkbox color into blue, just like Chrome does (same RGB value). You can see the difference in the screenshot:

To change the color of range bars, you can simply change the type into "range":

input[type="range"]{

accent-color: rgb(0 117 255);

}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Shijie Li