From d6f55a508cf8bc25636e506ae2b55f5ab67ba98e Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 30 Jan 2019 16:40:53 -0600
Subject: [PATCH] Use custom appearance and arrow for select fields

---
 res/css/views/elements/_Field.scss     | 20 ++++++++++++++++++++
 src/components/views/elements/Field.js |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index d2877ca741..eca620376d 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -32,6 +32,26 @@ limitations under the License.
     padding: 8px 9px;
 }
 
+.mx_Field select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+}
+
+// Can't add pseudo-elements to a select directly, so we use its parent.
+.mx_Field_select::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    width: 10px;
+    height: 6px;
+    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask-repeat: no-repeat;
+    background: $primary-fg-color;
+    z-index: 1;
+    pointer-events: none;
+}
+
 .mx_Field input:focus,
 .mx_Field select:focus,
 .mx_Field textarea:focus {
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 774ec1db88..55d1f42b55 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -60,7 +60,7 @@ export default class Field extends React.PureComponent {
         const element = this.props.element || "input";
         const fieldInput = React.createElement(element, extraProps, this.props.children);
 
-        return <div className="mx_Field">
+        return <div className={`mx_Field mx_Field_${element}`}>
             {fieldInput}
             <label htmlFor={this.props.id}>{this.props.label}</label>
         </div>;