Correct dropdown arrow styling in Firefox, IE11. Fix #4336 (#4373)

CHANGELOG.txt

@@ -19,6 +19,7 @@ Changelog
  * Fix: `UserAttributeSimilarityValidator` is now correctly enforced on user creation / editing forms (Tim Heap)
  * Fix: Focal area removal not working in IE11 and MS Edge (Thibaud Colas)
  * Fix: Rewrite password change feedback message to be more user-friendly ( Casper Timmers)
+ * Fix: Correct dropdown arrow styling in Firefox, IE11 (Janneke Janssen, Alexs Mathilda)
 
 
 2.0.1 (xx.xx.xxxx) - IN DEVELOPMENT

docs/releases/2.1.rst

@@ -33,6 +33,7 @@ Bug fixes
  * ``UserAttributeSimilarityValidator`` is now correctly enforced on user creation / editing forms (Tim Heap)
  * Focal area removal not working in IE11 and MS Edge (Thibaud Colas)
  * Rewrite password change feedback message to be more user-friendly ( Casper Timmers)
+ * Correct dropdown arrow styling in Firefox, IE11 (Janneke Janssen, Alexs Mathilda)
 
 
 Upgrade considerations

wagtail/admin/static_src/wagtailadmin/scss/components/_forms.scss

@@ -55,6 +55,7 @@ textarea,
 select,
 .halloeditor,
 .tagit {
+    appearance: none;
     box-sizing: border-box;
     border-radius: 6px;
     width: 100%;
@@ -62,8 +63,6 @@ select,
     border: 1px solid $color-input-border;
     padding: 0.9em 1.2em;
     background-color: $color-fieldset-hover;
-    // stylelint-disable-next-line property-no-vendor-prefix
-    -webkit-appearance: none;
     color: $color-text-input;
     font-size: 1.2em;
     font-weight: 300;
@@ -89,6 +88,11 @@ select,
     }
 }
 
+// Reset the arrow on `<select>`s in IE10+.
+select::-ms-expand {
+    display: none;
+}
+
 // select boxes
 .choice_field .input,
 .model_choice_field .input,