Как сделать широкий текстовый курсор в input type=text

function updateSelection(event) { 
  var inp = event.target; 
   
  if (inp.selectionStart === inp.selectionEnd) { 
    ++inp.selectionEnd; 
  } 
} 
 
var inp = document.querySelector('input'); 
 
inp.addEventListener('input', updateSelection); 
inp.addEventListener('keyup', updateSelection); 
inp.addEventListener('click', updateSelection); 
 
inp.addEventListener('keydown', function (event) { 
  var inp = event.target; 
 
  if (event.keyCode === 37 && inp.selectionStart+1 === inp.selectionEnd) { // Left 
    --inp.selectionEnd; 
  } 
});

input { 
  font-family: monospace; 
} 
 
::selection { 
  background: black; 
  color: white; 
}

<input>

var txt = document.getElementById('text'); 
var wrp = document.getElementById('wrapper'); 
 
wrp.onclick = function() { 
  txt.focus(); 
} 
 
setInterval(function() { 
  var pos = getCursorPosition(txt); 
  var val = txt.value; 
  var symb; 
  if (typeof val[pos] == "undefined" || val[pos] == " ") symb = " "; 
  else symb = val[pos]; 
  var curs = "<span style='background: #000; color: #fff;'>" + symb + "</span>"; 
  var p1 = val.slice(0, pos); 
  var p2 = val.slice(pos + 1, val.lenght); 
  wrp.innerHTML = p1.replace(/ /g, "&nbsp;") + curs + p2.replace(/ /g, "&nbsp;"); 
 
  wrp.style.top = (txt.getBoundingClientRect().top + txt.offsetTop + 3) + "px"; 
  wrp.style.left = (txt.getBoundingClientRect().left + txt.offsetLeft + 2) + "px"; 
 
  txt.style.width = parseInt(document.defaultView.getComputedStyle(wrp).width, 10) + 10 + "px"; 
}, 10); 
 
function getCursorPosition(ctrl) { 
  var caretPos = 0; 
  if (document.selection) { 
    ctrl.focus(); 
    var sel = document.selection.createRange(); 
    sel.moveStart('character', -ctrl.value.length); 
    caretPos = sel.text.length; 
  } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { 
    caretPos = ctrl.selectionStart; 
  } 
  return caretPos; 
}

#text { 
  font-family: monospace; 
  color: transparent; 
} 
 
#wrapper { 
  font-family: monospace; 
  position: absolute; 
  min-width: 150px; 
}

<input id="text" type="text" /> 
<span id="wrapper"></span>