From 0339d83434b19c5722d2ed02e8c75030d7a6e2e7 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Jan 2025 02:11:17 +0200
Subject: [PATCH] style(next): create a style for dropdown buttons to mimic
 combo boxes

---
 src/public/stylesheets/theme-next/forms.css | 27 +++++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
index bf3cfe7b6..f64187c4d 100644
--- a/src/public/stylesheets/theme-next/forms.css
+++ b/src/public/stylesheets/theme-next/forms.css
@@ -126,24 +126,41 @@ input::selection,
     background: transparent !important;
 }
 
-/* Combo boxes */
+/* Combo box-like dropdown buttons */
 
-select, select.form-select {
+.select-button.dropdown-toggle {
+    padding-right: 40px;
+}
+
+.select-button.dropdown-toggle::after {
+    /* Remove the original arrow */
+    content: unset;
+}
+
+/* Combo boxes and combo box-like dropdown buttons */
+
+select,
+select.form-select,
+.select-button.dropdown-toggle,
+.select-button.dropdown-toggle.btn {
     outline: 3px solid transparent;
     outline-offset: 6px;
-    background: unset;
     background: var(--input-background-color)
                 var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat;
     color: var(--input-text-color);
     border: unset;
 }
 
-select:hover, select.form-select:hover {
+select:hover,
+select.form-select:hover,
+.select-button.dropdown-toggle:hover {
     background-color: var(--input-hover-background);
     color: var(--input-hover-color);
 }
 
-select:focus, select.form-select:focus {
+select:focus,
+select.form-select:focus,
+.select-button.dropdown-toggle:focus {
     box-shadow: unset;
     outline: 3px solid var(--input-focus-outline-color);
     outline-offset: 0;