Change textarea cursor color in the textarea

Question

I have the following textarea:

Textarea example

How can I change the inner cursor color?

I dont know. Might be there is no way since cursor is not part of web page but part of OS and each OS will define look and colour of standard cursor — Hrvoje Golcic, Dec 02 '13 at 09:09
Here is a link that will answer this: http://stackoverflow.com/questions/6092963/can-i-change-the-blinking-caret-in-a-form-text-area-in-a-browser — Albzi, Dec 02 '13 at 09:11
You should read this : http://stackoverflow.com/questions/7339333/styling-text-input-caret . Just to help in your search, it is `caret` and not cursor. ;) — kmas, Dec 02 '13 at 09:11
Possible duplicate of [Styling text input caret](https://stackoverflow.com/questions/7339333/styling-text-input-caret) — D Malan, Aug 28 '19 at 17:24

score 1 · Answer 1 · answered Oct 01 '21 at 07:49

1

I know that the question is old and out of date. But the question remains unanswered. Let's fix it.

Сaret-color is probably what you were looking for.

textarea{
caret-color: red;
}

<textarea>
</textarea>

answered Oct 01 '21 at 07:49

DiD

score -2 · Answer 2 · edited Dec 02 '13 at 09:21

-2

A custom caret can be used with either an .ani or .cur file

textarea {
 cursor: url(cursor.cur);
}

or

textarea {
 cursor: url(cursor.ani);
}

For more details regarding carets

or

.cursor { font-size: 12px; background-color: red; color: red; position: relative; opacity: 0.5; }

edited Dec 02 '13 at 09:21

MIdhun Krishna

answered Dec 02 '13 at 09:10

user3040610

2 Answers2