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 34efb5b50f..a95cb74a8d 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -139,7 +139,7 @@ module.exports = React.createClass({
             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"