diff --git a/src/xterm.css b/src/xterm.css
index 37f661a7..6d6f48fa 100644
--- a/src/xterm.css
+++ b/src/xterm.css
@@ -192,11 +192,14 @@
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 1;
+    opacity: 0.3;
+    pointer-events: none;
 }
 
 .terminal .xterm-selection div {
     position: absolute;
-    background-color: #555;
+    background-color: #fff;
 }
 
 /*
diff --git a/src/xterm.js b/src/xterm.js
index 17748296..0eccfbb3 100644
--- a/src/xterm.js
+++ b/src/xterm.js
@@ -648,8 +648,7 @@ Terminal.prototype.open = function(parent, focus) {
   this.viewportScrollArea.classList.add('xterm-scroll-area');
   this.viewportElement.appendChild(this.viewportScrollArea);
 
-  // Create the selection container. This needs to be added before the
-  // rowContainer as the selection must be below the text.
+  // Create the selection container.
   this.selectionContainer = document.createElement('div');
   this.selectionContainer.classList.add('xterm-selection');
   this.element.appendChild(this.selectionContainer);