From d004beb5cdada493b9f73584deeba492006b93d0 Mon Sep 17 00:00:00 2001
From: Paul Holden <paulh@moodle.com>
Date: Thu, 7 Aug 2025 15:01:27 +0100
Subject: [PATCH] MDL-86196 forms: style choice dropdown/list element as form
 control.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We then get consistent borders, text, colour, etc as other elements
(and carrots).

Co-authored-by: Mikel Martín <mikel@moodle.com>
---
 public/lib/form/templates/element-choicedropdown.mustache | 2 +-
 public/theme/boost/scss/moodle/forms.scss                 | 7 +++++++
 public/theme/boost/style/moodle.css                       | 3 +++
 public/theme/classic/style/moodle.css                     | 3 +++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/public/lib/form/templates/element-choicedropdown.mustache b/public/lib/form/templates/element-choicedropdown.mustache
index 999e69db435..876c3181cbd 100644
--- a/public/lib/form/templates/element-choicedropdown.mustache
+++ b/public/lib/form/templates/element-choicedropdown.mustache
@@ -121,7 +121,7 @@
         </select>
         {{#element.dropdown}}
             {{< core/local/dropdown/status}}
-                {{$ buttonclasses }} btn btn-outline-secondary dropdown-toggle {{/ buttonclasses }}
+                {{$ buttonclasses }} form-select dropdown-toggle {{/ buttonclasses }}
             {{/ core/local/dropdown/status}}
         {{/element.dropdown}}
         {{/element.frozen}}
diff --git a/public/theme/boost/scss/moodle/forms.scss b/public/theme/boost/scss/moodle/forms.scss
index 2697826b317..86b9870645b 100644
--- a/public/theme/boost/scss/moodle/forms.scss
+++ b/public/theme/boost/scss/moodle/forms.scss
@@ -48,6 +48,13 @@
 .form-select {
     width: auto;
     max-width: 100%;
+    // Remove the default caret from the dropdown toggle button.
+    // This is needed to avoid the double caret when using alongside form-select.
+    &.dropdown-toggle {
+        &::after {
+            content: none;
+        }
+    }
 }
 
 #jump-to-activity.form-select {
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index 21c39a768ea..33653cf2b4d 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -34892,6 +34892,9 @@ body.path-question-type .mform fieldset.hidden {
   width: auto;
   max-width: 100%;
 }
+.form-select.dropdown-toggle::after {
+  content: none;
+}
 
 #jump-to-activity.form-select {
   width: 100%;
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index 40ea688d152..5001af97d55 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -34892,6 +34892,9 @@ body.path-question-type .mform fieldset.hidden {
   width: auto;
   max-width: 100%;
 }
+.form-select.dropdown-toggle::after {
+  content: none;
+}
 
 #jump-to-activity.form-select {
   width: 100%;