Changing Caret Color in Contenteditable div

Question

Can I change the caret color inside a content editable div.
Cursor color is always same as text color, red in my case. So my question is that is there a way to change the caret color to black? eg caret-color:black HTML:

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

css:

.red{
   color:red;
  }

Check this link

check this link http://stackoverflow.com/questions/18779354/assign-color-to-mouse-cursor-using-css . It might help u — bob, Aug 26 '15 at 12:52
Maybe [this](http://stackoverflow.com/questions/7339333/styling-text-input-caret) will help you. — Michał Perłakowski, Aug 26 '15 at 12:55
Also see [this](http://stackoverflow.com/questions/8408041/customizing-text-cursor-in-contenteditable-element). — Michał Perłakowski, Aug 26 '15 at 12:56
you are looking for this http://jsfiddle.net/8k1k0awb/131/ ? — Leo the lion, Aug 26 '15 at 13:08
@Vishu238 are you looking for this **http://jsfiddle.net/01y5196b/3/** or what.? — Himesh Aadeshara, Aug 31 '15 at 08:29

score 4 · Answer 1 · answered Aug 13 '17 at 20:48

4

Yes. Use modern CSS!

div {
    caret-color : black;
}

answered Aug 13 '17 at 20:48

Gibolt

42,564
15
187
127

score 0 · Answer 2 · answered Sep 01 '15 at 09:01

0

ok.here's the 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;
}
}

**

answered Sep 01 '15 at 09:01

kobi

81
4

score -1 · Answer 3 · answered Aug 31 '15 at 08:31

-1

hi i think this may help you for your answer

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

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

here is the demo fiddle working code

Demo code

answered Aug 31 '15 at 08:31

Himesh Aadeshara

2,114
16
26

Did you get my problem?? – Vishu238 Aug 31 '15 at 13:35

Changing Caret Color in Contenteditable div

3 Answers3