Use custom appearance and arrow for select fields

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 {

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