id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
36513	"Background color for admin's m2m multi-select ""selected"" rows is broken in Edge and Firefox"	cjs59	Nilesh Pahari	"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);
}
}}}

** Chrome focused **

[[Image(Chrome-focused.png)]]

** Chrome unfocused **

[[Image(Chrome-unfocused.png)]]

** Edge focused **

[[Image(Edge-focused.png)]]

** Edge unfocused **

[[Image(Edge-unfocused.png)]]

** Edge focused(dark) **

[[Image(Screenshot 2025-07-21 at 7.43.04 AM.png)]]

** Edge unfocused(dark) **

[[Image(Screenshot 2025-07-21 at 7.43.10 AM.png​)]]"	Bug	closed	contrib.admin	5.2	Normal	fixed	accessibility	Antoliny	Ready for checkin	1	0	0	0	1	0