MDL-86196 forms: style choice dropdown/list element as form control.

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

Co-authored-by: Mikel Martín <[email protected]>

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}}

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 {

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%;

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%;