diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss
index 7d13405478..23ee06f7b3 100644
--- a/res/css/structures/_SearchBox.scss
+++ b/res/css/structures/_SearchBox.scss
@@ -18,6 +18,10 @@ limitations under the License.
     flex: 1 1 0;
     min-width: 0;
 
+    &.mx_SearchBox_blurred:not(:hover) {
+        background-color: transparent;
+    }
+
     .mx_SearchBox_closeButton {
         cursor: pointer;
         background-image: url('$(res)/img/icons-close.svg');
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index a381416a80..4d68ff4e96 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -140,7 +140,7 @@ module.exports = createReactClass({
             this.props.placeholder;
         const className = this.props.className || "";
         return (
-            <div className="mx_SearchBox mx_textinput">
+            <div className={classNames("mx_SearchBox", "mx_textinput", {"mx_SearchBox_blurred": this.state.blurred})}>
                 <input
                     key="searchfield"
                     type="text"