Selection between background and foreground

src/Renderer.ts

@@ -161,6 +161,7 @@ export class Renderer {
       // Return the row's spans to the pool
       while (this._terminal.children[y].children.length) {
         const child = this._terminal.children[y].children[0];
+        console.log('pool:release', child);
         this._terminal.children[y].removeChild(child);
         this._spanElementObjectPool.release(<HTMLElement>child);
       }
@@ -257,7 +258,7 @@ export class Renderer {
               }
 
               if (bg < 256) {
-                currentElement.classList.add(`xterm-bg-color-${bg}`);
+                innerHTML += `<span class="xterm-bg xterm-bg-color-${bg}"></span>`;
               }
 
               if (fg < 256) {

src/xterm.css

@@ -165,13 +165,26 @@
     position: absolute;
     left: 0;
     top: 0;
+    z-index: 0;
 }
 
 .terminal .xterm-rows > div {
     /* Lines containing spans and text nodes ocassionally wrap despite being the same width (#327) */
     white-space: nowrap;
 }
 
+.terminal .xterm-rows > div > span {
+    position: relative;
+}
+
+.terminal .xterm-rows .xterm-bg {
+    display: inline-block;
+    width: 100%;
+    position: absolute;
+    height: 100%;
+    z-index: -2;
+}
+
 .terminal .xterm-scroll-area {
     visibility: hidden;
 }
@@ -192,14 +205,13 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 1;
-    opacity: 0.3;
+    z-index: -1;
     pointer-events: none;
 }
 
 .terminal .xterm-selection div {
     position: absolute;
-    background-color: #fff;
+    background-color: #4273d0;
 }
 
 /*

src/xterm.js

@@ -670,11 +670,6 @@ Terminal.prototype.open = function(parent, focus) {
   this.viewportScrollArea.classList.add('xterm-scroll-area');
   this.viewportElement.appendChild(this.viewportScrollArea);
 
-  // Create the selection container.
-  this.selectionContainer = document.createElement('div');
-  this.selectionContainer.classList.add('xterm-selection');
-  this.element.appendChild(this.selectionContainer);
-
   // Create the container that will hold the lines of the terminal and then
   // produce the lines the lines.
   this.rowContainer = document.createElement('div');
@@ -683,6 +678,11 @@ Terminal.prototype.open = function(parent, focus) {
   this.children = [];
   this.linkifier.attachToDom(document, this.children);
 
+  // Create the selection container.
+  this.selectionContainer = document.createElement('div');
+  this.selectionContainer.classList.add('xterm-selection');
+  this.rowContainer.appendChild(this.selectionContainer);
+
   // Create the container that will hold helpers like the textarea for
   // capturing DOM Events. Then produce the helpers.
   this.helperContainer = document.createElement('div');