Closes #12

src/selection/SelectionHandler.js

@@ -59,7 +59,7 @@ export default class SelectionHandler extends EventEmitter {
           const spans = this.highlighter.wrapRange(selectedRange);
           spans.forEach(span => span.className = 'r6o-selection');
 
-          this._clearNativeSelection();
+          this._hideNativeSelection();
 
           this.emit('select', {
             selection: stub,
@@ -70,7 +70,14 @@ export default class SelectionHandler extends EventEmitter {
     }
   }
 
-  _clearNativeSelection = () => {
+  _hideNativeSelection = () => {
+    this.el.classList.add('hide-selection');
+  }
+
+  clearSelection = () => {
+    this._currentSelection = null;
+
+    // Remove native selection, if any
     if (window.getSelection) {
       if (window.getSelection().empty) {  // Chrome
         window.getSelection().empty();
@@ -80,10 +87,8 @@ export default class SelectionHandler extends EventEmitter {
     } else if (document.selection) {  // IE?
       document.selection.empty();
     }
-  }
 
-  clearSelection = () => {
-    this._currentSelection = null;
+    this.el.classList.remove('hide-selection');
 
     const spans = Array.prototype.slice.call(this.el.querySelectorAll('.r6o-selection'));
     if (spans) {

themes/default/highlights/_highlights.scss

@@ -8,3 +8,11 @@
   background-color:rgba(207, 207, 255, 0.63);
   cursor:pointer;
 }
+
+.hide-selection::selection, .hide-selection ::selection {
+  background: transparent;
+}
+
+.hide-selection::-moz-selection .hide-selection ::-moz-selection{
+  background: transparent;
+}