Opened 4 months ago
Last modified 4 months 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 , 4 months ago
| Attachment: | Chrome-focused.png added |
|---|
by , 4 months ago
| Attachment: | Chrome-unfocused.png added |
|---|
by , 4 months ago
| Attachment: | Edge-focused.png added |
|---|
by , 4 months ago
| Attachment: | Edge-unfocused.png added |
|---|