0

I'm wanting a pointer cursor over an element until that element has focus, and then turn to the typical text caret. Easy enough in Chrome, but IE11 and Edge don't seem to let me change the cursor if the element has the contenteditable attribute.

#thing{cursor:pointer;}

<div id="thing" contenteditable="true"style="width:200px;border:1px solid black;cursor:pointer;"> this is a some random foo bar dog jumps over a stick test</div>

The simple example shows the cursor only changing if contentedible is false. If true, it only does the text cursor. Rather annoying since MS is the one who supposedly created this attribute. Is this just a bug? Intended by design? Is there a workaround?

I came across this link but unfortunately I'm still not having any luck by changing the DTD. How to change cursor style on element with 'contenteditable' attribute in IE?

Phaelax z
  • 1,814
  • 1
  • 7
  • 19
  • I've just tried this myself in IE and haven't been able to get it to play ball. I would say try your luck with JavaScript? Sorry I couldn't help. – Halden Collier Feb 13 '20 at 17:23

1 Answers1

0

I have reproduced the problem on my side, it could be the default behavior of the IE browser, I will feedback this issue.

As a workaround, I suggest you could try to use the <textarea> tag, by using this tag, in IE browser it could use the pointer cursor, code as below:

<textarea  id="thing" contenteditable="true" style="width:200px; height:100px; border :1px solid black; cursor:pointer">

    this is a some random foo bar jumps over a stick test

</textarea>
Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
  • Unfortunately this was only a small example of larger web app. I think your solution could work but I'd have to make all my editable elements into textfields or something and then customize a lot of CSS and update the event listeners. But this may be the only IE solution. – Phaelax z Feb 14 '20 at 13:47