diff --git a/build/plotcss.js b/build/plotcss.js
index 4b412c9eee6..169edfce295 100644
--- a/build/plotcss.js
+++ b/build/plotcss.js
@@ -8,6 +8,7 @@ var rules = {
     "X a": "text-decoration:none;",
     "X a:hover": "text-decoration:none;",
     "X .crisp": "shape-rendering:crispEdges;",
+    "X .user-select-none": "-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;",
     "X svg": "overflow:hidden;",
     "X svg a": "fill:#447adb;",
     "X svg a:hover": "fill:#3c6dc5;",
diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js
index 8849829f9e9..8fe9f62d35f 100644
--- a/src/components/legend/draw.js
+++ b/src/components/legend/draw.js
@@ -336,13 +336,8 @@ function drawTexts(context, gd, d, i, traces) {
         y: 0,
         'data-unformatted': name
     })
-    .style({
-        'text-anchor': 'start',
-        '-webkit-user-select': 'none',
-        '-moz-user-select': 'none',
-        '-ms-user-select': 'none',
-        'user-select': 'none'
-    })
+    .style('text-anchor', 'start')
+    .classed('user-select-none', true)
     .call(Drawing.font, fullLayout.legend.font)
     .text(name);
 
diff --git a/src/css/_base.scss b/src/css/_base.scss
index b7c2b66aeaf..3551948be0a 100644
--- a/src/css/_base.scss
+++ b/src/css/_base.scss
@@ -22,6 +22,10 @@ a {
 
 .crisp { shape-rendering: crispEdges; }
 
+.user-select-none {
+    @include vendor('user-select', none);
+}
+
 //Required for IE11. Other browsers set this by default.
 svg { overflow: hidden; }
 
diff --git a/src/snapshot/tosvg.js b/src/snapshot/tosvg.js
index ec8801fc1d7..14c36df1ce3 100644
--- a/src/snapshot/tosvg.js
+++ b/src/snapshot/tosvg.js
@@ -107,12 +107,7 @@ module.exports = function toSVG(gd, format) {
     svg.node().style.background = '';
 
     svg.selectAll('text')
-        .attr({'data-unformatted': null})
-        .style({
-            '-webkit-user-select': null,
-            '-moz-user-select': null,
-            '-ms-user-select': null
-        })
+        .attr('data-unformatted', null)
         .each(function() {
             // hidden text is pre-formatting mathjax, the browser ignores it but it can still confuse batik
             var txt = d3.select(this);