How to make custom caret?

Question

I need to style the caret of <input> using CSS or JavaScript. It's probably not possible with CSS3, so how can I do that with JavaScript?

Then final <input> should look like picture above.

Answer 1

It's called Caret. You cannot style it using CSS, but using JavaScript, you can mimic it:

function $(elid) {
  return document.getElementById(elid);
}

var cursor;
window.onload = init;

function init() {
  cursor = $("cursor");
  cursor.style.left = "0px";
}

function nl2br(txt) {
  return txt.replace(/\n/g, "<br />");
}

function writeit(from, e) {
  e = e || window.event;
  var w = $("writer");
  var tw = from.value;
  w.innerHTML = nl2br(tw);
}

function moveIt(count, e) {
  e = e || window.event;
  var keycode = e.keyCode || e.which;
  //    alert(count);
  if (keycode == 37 && parseInt(cursor.style.left) >= (0 - ((count - 1) * 10))) {
    cursor.style.left = parseInt(cursor.style.left) - 10 + "px";
  } else if (keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0) {
    cursor.style.left = parseInt(cursor.style.left) + 10 + "px";
  }

}

function alert(txt) {
  console.log(txt);
}

body {
  margin: 0px;
  padding: 0px;
  height: 99%;
}
textarea#setter {
  left: -1000px;
  position: absolute;
}
.cursor {
  font-size: 12px;
  background-color: blue;
  color: blue;
  position: relative;
  opacity: 0.5;
  height: 1.5em;
  width: 3px;
  max-width: 3px;
  overflow: hidden;
  text-indent: -5px;
  display: inline-block;
  text-decoration: blink;
  animation: blinker 1s linear infinite;
}
#terminal {
  margin: 8px;
  cursor: text;
  height: 500px;
  overflow: auto;
}
#writer {
  font-family: cursor, courier;
  font-weight: bold;
}
#getter {
  margin: 5px;
}
@keyframes blinker {  
  50% { opacity: 0.0; }
}

<div id="terminal" onclick="$('setter').focus();">
  <textarea type="text" id="setter" onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea>
  <div id="getter">
    <span id="writer"></span><b class="cursor" id="cursor">B</b>
  </div>
</div>

I have taken the code from Emulating a terminal-like caret with JavaScript and CSS and have modified it to your requirement.