Change Caret color in Contenteditable div

Question

Is it possible to change the color of the carriage inside the editable content.
The color of the cursor is always the same as the color of the text, red in my case. So my question is, is there a way to change the color of the carriage to black? e.g. caret-color:black HTML:

 <div class="red" contenteditable="true"> hello </div> 

CSS

 .red{ color:red; } 

Check this link

Answer 1

Yes. Use modern CSS!

 div { caret-color : black; } 

Answer 2

ok.here solution :) http://codepen.io/anon/pen/avbVzx **

 <input id="a" type="text"> <input id="b" type="text"> #a{ color:black; -webkit-text-fill-color: red; } #b{ color:red; -webkit-text-fill-color: green; } } 

**

Answer 3

hi i think this may help you in your answer

 .red{ color:red; } .red:focus{ outline:red; border:2px solid red; } 

 <div class="red" contenteditable="true"> hello </div> 

here is the working code of the demo script

Demo code