From 35367964719dc93fb8eb79501d222e15cd148df8 Mon Sep 17 00:00:00 2001
From: Janneke Janssen <jjanssen@users.noreply.github.com>
Date: Thu, 15 Mar 2018 12:36:51 +0100
Subject: [PATCH] Correct dropdown arrow styling in Firefox, IE11. Fix #4336
 (#4373)

---
 CHANGELOG.txt                                             | 1 +
 docs/releases/2.1.rst                                     | 1 +
 .../static_src/wagtailadmin/scss/components/_forms.scss   | 8 ++++++--
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index ce35875085..2ddb06b854 100644
--- a/CHANGELOG.txt
+++ b/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
diff --git a/docs/releases/2.1.rst b/docs/releases/2.1.rst
index 15f6b9be98..c60c6b6940 100644
--- a/docs/releases/2.1.rst
+++ b/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
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/components/_forms.scss b/wagtail/admin/static_src/wagtailadmin/scss/components/_forms.scss
index 617beff31e..4c49a3a773 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/components/_forms.scss
+++ b/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,