CODEWITHSUNDEEP
javascripthtmlcssreactjsdraftjs
Tarun Dugar
Tarun Dugar

Reputation: 8971

Draft.js: Change color of caret

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.

Upvotes: 0

Views: 1392

Answers (2)

Gibolt
Gibolt

Reputation: 47097

Use caret-color:

div.class {
    caret-color : red;
}

Supported in 56% of browsers

Upvotes: 0

tobiasandersen
tobiasandersen

Reputation: 8680

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;
}

https://jsfiddle.net/yuk0fogn/

Upvotes: 4

Related Questions