diff --git a/res/css/_common.scss b/res/css/_common.scss
index 8c72f6cb15..a702571397 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -52,11 +52,6 @@ a:visited {
 
 input[type=text], input[type=password], textarea {
     background-color: transparent;
-    color: $primary-fg-color;
-}
-
-input[type=text].error, input[type=password].error {
-    border: 1px solid $warning-color;
 }
 
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 1f198e4717..6e08597935 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -178,6 +178,66 @@ $lightbox-border-color: #ffffff;
 // unused?
 $progressbar-color: #000;
 
+// form elements
+
+// .mx_textinput is a container for a text input
+// + some other controls like buttons, ...
+// it has the appearance of a text box so the controls
+// appear to be part of the input
+
+:not(.mx_textinput) > input[type=text],
+:not(.mx_textinput) > input[type=search],
+.mx_textinput {
+    display: block;
+    margin: 9px;
+    box-sizing: border-box;
+    background-color: transparent;
+    color: $input-darker-fg-color;
+    border-radius: 4px;
+    border: 1px solid #c1c1c1;
+}
+
+.mx_textinput {
+    display: flex;
+    align-items: center;
+}
+
+.mx_textinput > input[type=text],
+.mx_textinput > input[type=search] {
+    border: none;
+    flex: 1;
+    color: inherit; //from .mx_textinput
+}
+
+.mx_textinput > :not(input) {
+    margin-right: 9px;
+}
+
+input[type=text],
+input[type=search] {
+    padding: 9px;
+    font-family: $font-family;
+    font-size: 14px;
+    font-weight: 600;
+    min-width: 0;
+}
+
+
+// dont search UI as not all browsers support it,
+// we implement it ourselves where needed instead
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
+
+.input[type=text]::-webkit-input-placeholder,
+.input[type=text]::-moz-placeholder,
+.input[type=search]::-webkit-input-placeholder,
+.input[type=search]::-moz-placeholder {
+    color: #a5aab2;
+}
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {