javascript - How to make custom text cursor? -

this question has answer here:

• styling text input caret 5 answers

i need make text input cursor (text cursor) own styling using css or javascript. it's not possible css3, how can javascript?

then final input should picture above.

it's called caret. cannot style using css, using javascript, 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 code emulating terminal-like caret javascript , css , have modified requirement.