diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index dac83bfb28..c1984fb7c5 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -37,12 +37,6 @@ limitations under the License.
         display: inline-block;
         position: relative;
         margin: 2px;
-
-        &:hover {
-            background: $panel-actions;
-            border-radius: 6px;
-            z-index: 1;
-        }
     }
 
     .mx_MessageComposerFormatBar_button {
@@ -50,6 +44,14 @@ limitations under the License.
         height: 28px;
         box-sizing: border-box;
         vertical-align: middle;
+        background: none;
+        border: none;
+
+        &:hover {
+            background: $panel-actions;
+            border-radius: 6px;
+            z-index: 1;
+        }
     }
 
     .mx_MessageComposerFormatBar_button::after {
diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index 3716450239..d3038b89e2 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -103,8 +103,12 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
             </div>
         </div>;
 
+        // element="button" and type="button" are necessary for the buttons to work on WebKit,
+        // otherwise the text is deselected before onClick can ever be called
         return (
             <AccessibleTooltipButton
+                element="button"
+                type="button"
                 onClick={this.props.onClick}
                 title={this.props.label}
                 tooltip={tooltip}