How to change blinking cursor/caret in textarea

Question

I have a textarea with transparent text, with an underlying pre that displays the text via js, so it looks like the user is typing dynamic text as they go. It works on the same concept as the background colors on this Regex Tester, except I'm changing text color and background color, so I want transparent text in the textarea.

However, defining the textarea's color as transparent, also makes the blinking cursor transparent, which is disorienting. Is there a way to only change the blinking cursors color or only change the text's color and not affect the blinking cursor?

I have browsed other questions, but they haven't provided sufficient answers.

Note: I am referring to the blinking textarea caret, not the mouse cursor. When you click in a textarea or a text input, a blinking textarea "cursor" or caret pops up. This question is about that, not about the mouse cursor.

Vagrancy

#6093463 – Montenegro

That question is from 2011, with one unaccepted answer of "The simple answer is you can't..." @Montenegro Note the last line in my question. – Vagrancy

#10683087 – Montenegro

what about this one ? – Montenegro

Jeez, I originally went over other questions on this site that I had looked at and why they don't work, but took it out because I wasn't sure it was relevant. Both of those refer to the mouse cursor, not the textarea caret. Click in a textbox, like the "add comment" box. That flashing bar where you're typing is what I'm talking about. – Vagrancy

I guess they posted these links as comments since you can't downvote a comment... @JamesG. take a look at my answer, let me know if you still need help with this - I had the same problem just now and this is one of the first pages that come up in google search. – Williawilliam

Answer 1

The easy solution, but working only if you use a monospaced font (like Courier or Courier New) - don't set textarea's color to transparent, but on keyDown fill it with spaces insead of any other characters:

on keyDown ↓
get the character ↓
put it in the underlaying <pre> tag ↓
put a space in the textarea

You would need to get the caret position to place the space and the character in appropriate place, but there are scripts for that already (this one for example).

I can create a fiddle/plunkr example for you if you want.

The thing is getting harder if the font you are using is not monospaced, but sice you are using a <pre> tag you should be ok with this one (if anyone is curious I can describe the non-trivial, time consuming and definately not-IE-compatible approach for not monospaced fonts I came up with).

EDIT: Actually you can also get the caret position from the transparent textarea and move a 1px-wide black div to the correct position (for not monospaced fonts). You can also blink it using CSS animations or Javascript.

Williawilliam

Answer 2

try the css property caret-color

docs here: w3schools - caret color

textarea {
  caret-color:red;
}

<textarea></textarea>

Barajas