fix: hide dropdown arrow on multi-selects in dark mode

The dark-mode arrow swap outranked select[multiple], so the arrow
repeated behind every option in listbox selects (e.g. query columns).
Wrap the mode selectors in :where() to keep base select specificity.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-03 22:56:14 +02:00
co-authored by Claude Opus 5.5
parent 06cd1db99c
commit e1906611d9
+4 -3
View File
@@ -85,9 +85,10 @@ select {
padding-inline-end: 32px;
}
[dir="rtl"] select { background-position: 6px 50%; }
/* The chevron is an image, so it cannot use color roles: one file per mode */
:root[data-mode="dark"] select { background-image: url(../images/arrow-drop-down-dark.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) select { background-image: url(../images/arrow-drop-down-dark.svg); } }
/* The chevron is an image, so it cannot use color roles: one file per mode.
:where() keeps the swap at select's specificity so select[multiple] below still drops it */
:where(:root[data-mode="dark"]) select { background-image: url(../images/arrow-drop-down-dark.svg); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-mode="light"])) select { background-image: url(../images/arrow-drop-down-dark.svg); } }
/* Autocomplete fields (parent task, watchers): M3 leading search icon, same per-mode files */
input.autocomplete {
background: transparent url(../images/search.svg) no-repeat 12px 50% / 20px;