How to use this square cursor in a HTML input field?

Question

How can I use this square cursor ( image below ) in the input tags ?

Answer 1

You would have to 1) roll your own textbox and 2) hide the real cursor by continually focusing it elsewhere. Then, capture the key events at the document/body level, and insert that value into your own element. The cursor would then be an animated GIF that was always positioned at far right of your "textbox".

You will run into issues with #2, and the whole thing is generally inadvisable. HTML 5 opens up some new possibilities, but it's still an awful lot of work for a cursor.