From 202bb9e1267e3b539db3b70152b5c7b2d93091a7 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 12 Feb 2025 01:29:50 +0200 Subject: [PATCH] style(next): combo boxes: fix the dropdown arrow disappearing in certain situations while in the focused state --- src/public/stylesheets/theme-next/forms.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index bdafeed32..cd4f51073 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -294,11 +294,13 @@ select, select.form-select, select.form-control, .select-button.dropdown-toggle.btn { + --dropdown-arrow: var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat; + outline: 3px solid transparent; outline-offset: 6px; padding-right: calc(15px + 1.5rem); background: var(--input-background-color) - var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat; + var(--dropdown-arrow); color: var(--input-text-color); border: unset; border-radius: 0.375rem; @@ -308,7 +310,8 @@ select:hover, select.form-select:hover, select.form-control:hover, .select-button.dropdown-toggle.btn:hover { - background-color: var(--input-hover-background); + background: var(--input-hover-background) + var(--dropdown-arrow); color: var(--input-hover-color); } @@ -324,7 +327,8 @@ select.form-control:focus, box-shadow: unset; outline: 3px solid var(--input-focus-outline-color); outline-offset: 0; - background-color: var(--select-focus-background); + background: var(--select-focus-background) + var(--dropdown-arrow); color: var(--select-focus-text-color); transition: outline-color 50ms linear, outline-offset 200ms ease-out;