Draft.js: Change color of caret

Question

I am using Facebook's Draft.js library to create a rich text box and I have a requirement to make the caret of the text box red. Is it possible?

I have read about the -webkit-text-fill-color property but it is making the typed text and the placeholder red instead of the caret.

tobiasandersen · Accepted Answer · 2017-03-15T15:06:47.580

4

This will make the caret red, and the text black, in webkit browsers:

.public-DraftEditor-content {  
  color: red;
  text-shadow: 0px 0px 0px #000;
  -webkit-text-fill-color: transparent;
}

Here's a fiddle showing it in action: https://jsfiddle.net/2atqzz5r/

Update: As of Chrome 57, you can use the new property caret-color:

.public-DraftEditor-content {  
  caret-color: red;
}

edited Mar 15 '17 at 15:06

answered Jan 24 '17 at 09:59

tobiasandersen

I actually think it works in the latest version of Firefox. Here's a list of all browsers supporting it: http://caniuse.com/#search=text-fill-color – tobiasandersen Jan 24 '17 at 10:44

score 0 · Answer 2 · answered Aug 13 '17 at 20:37

0

Use caret-color:

div.class {
    caret-color : red;
}

answered Aug 13 '17 at 20:37

Gibolt

2 Answers2