hide caret (text cursor) on contenteditable div in internet explorer

Question

I have contenteditable div on which i have file drop and copy-paste image event. By using the color:transparent i am able to hide the blinking cursor on chrome browser. but in IE i came to know "The color of the text cursor in an input on IE is always the inverse of the background color". Source:How do I change the color of the text cursor in an input field in IE?

Is there any alternative way to disable a cursor or change the speed of blinking cursor so it looks like hidden in IE.

Matchbook

Have you tried cursor: none on the element? This would work across all browsers. – Somnambulism

The property "cursor: none " is for disappearing the mouse pointer cursor. I need to hide the blinking cursor which usually in textbox/textarea or contenteditable div. – Matchbook

Answer 1

You can do it in CSS with:

caret-color: transparent

Doesn't work in IE though. Here is browser support chart.

Interlope

True, but will still help others who end up here from a Google search – Interlope

This was helpful, didn't search for IE and this what came up (first in google). This is exactly what I was searching for. Thanks. – Blind

Glad I could help. Thanks for the support chart as well. – Interlope

and I am looking for an IE solution specifically and your answer is just a noizzze. – Rubious

Answer 2

You can do this for IE with this hack:

color: transparent;
text-shadow: 0 0 0 #333333;

You can replace the color (#333333) with whatever text color you need.

Wherry

Answer 3

Assuming you mean changing the caret cursor, otherwise known as the text cursor; there are solutions available, although support for IE is rather limited. Perhaps, if not already, you might find this of some use: Hide textfield blinking cursor

Somnambulism

Answer 4

The easiest way to do it is by adding a textbox that is visible, but outside of the document area (top = -100px and left = -100px and position = absolute for example).

Then when you click in your textbox where you want to hide the blinking caret, add a mousedown event where you simply call the .focus() method on the other textbox (that is at top = -100).

The other method would be to set the CSS style caret-color: transparent

Aeneas

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Transpire