Opened 7 weeks ago
Last modified 6 weeks ago
#36513 assigned Bug
Background color for admin's m2m multi-select "selected" rows is broken in Edge — at Initial Version
Reported by: | cjs59 | Owned by: | |
---|---|---|---|
Component: | contrib.admin | Version: | 5.2 |
Severity: | Normal | Keywords: | accessibility |
Cc: | Antoliny | Triage Stage: | Accepted |
Has patch: | yes | Needs documentation: | no |
Needs tests: | no | Patch needs improvement: | yes |
Easy pickings: | yes | UI/UX: | no |
Description
The change in https://code.djangoproject.com/ticket/35809 has made the selected item hard to read in Microsoft Edge, as it displays as white text on a yellow background when the m2m widget is not in focus. Chrome and Firefox both display it as black text on a yellow background. When the user clicks on the m2m widget, it changes to use the browser's built-in colours: white text on dark grey for Edge, and white text on blue for Chrome/Firefox.
I am attaching screenshots to show the focused and unfocused colours in both Edge and Chrome.
Adding the following to a custom CSS file fixes Edge so the unfocused widget renders the same as in Chrome:
form .aligned select option:checked {
color: var(--body-fg);
}
Change History (4)
by , 7 weeks ago
Attachment: | Chrome-focused.png added |
---|
by , 7 weeks ago
Attachment: | Chrome-unfocused.png added |
---|
by , 7 weeks ago
Attachment: | Edge-focused.png added |
---|
by , 7 weeks ago
Attachment: | Edge-unfocused.png added |
---|