diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index c728f4bcd4..1fcd238c23 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -21,7 +21,8 @@ limitations under the License.
     margin: 1em 0;
 }
 
-.mx_Field input {
+.mx_Field input,
+.mx_Field select {
     font-weight: normal;
     border-radius: 4px;
     transition: border-color 0.25s;
@@ -29,17 +30,20 @@ limitations under the License.
     padding: 8px 9px;
 }
 
-.mx_Field input:focus {
+.mx_Field input:focus,
+.mx_Field select:focus {
     outline: 0;
     border-color: $input-focused-border-color;
 }
 
-.mx_Field input::placeholder {
+.mx_Field input::placeholder,
+.mx_Field select::placeholder {
     transition: color 0.25s ease-in 0s;
     color: transparent;
 }
 
-.mx_Field input:placeholder-shown:focus::placeholder {
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field select:placeholder-shown:focus::placeholder {
     transition: color 0.25s ease-in 0.1s;
     color: $greyed-fg-color;
 }
@@ -61,7 +65,9 @@ limitations under the License.
 }
 
 .mx_Field input:focus + label,
-.mx_Field input:not(:placeholder-shown) + label {
+.mx_Field input:not(:placeholder-shown) + label,
+.mx_Field select:focus + label,
+.mx_Field select:not(:placeholder-shown) + label {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,
@@ -72,6 +78,7 @@ limitations under the License.
     background-color: $field-focused-label-bg-color;
 }
 
-.mx_Field input:focus + label {
+.mx_Field input:focus + label,
+.mx_Field select:focus + label {
     color: $input-focused-border-color;
 }
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 428c7f1d6c..896eff5918 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -27,6 +27,9 @@ export default class Field extends React.PureComponent {
         label: PropTypes.string,
         // The field's placeholder string.
         placeholder: PropTypes.string,
+        // The type of field to create. Defaults to "input". Should be "input" or "select".
+        // To define options for a select, use <Field><option ... /></Field>
+        element: PropTypes.string,
         // All other props pass through to the <input>.
     }
 
@@ -38,13 +41,13 @@ export default class Field extends React.PureComponent {
         delete extraProps.type;
         delete extraProps.placeholder;
         delete extraProps.label;
+        delete extraProps.element;
+
+        const element = this.props.element || "input";
+        const fieldInput = React.createElement(element, extraProps, this.props.children);
 
         return <div className="mx_Field">
-            <input id={this.props.id}
-                type={this.props.type || "text"}
-                placeholder={this.props.placeholder}
-                {...extraProps}
-            />
+            {fieldInput}
             <label htmlFor={this.props.id}>{this.props.label}</label>
         </div>;
     }