Chrome Appears To Ignore User-select In A Contenteditable Div

I need to make it so some elements inside a contenteditable div are not selectable, so that the user will skip over them if they try to move the caret around where they are. The o

Solution 1:

I've run into this issue as well and have found a decent work around. It's not pretty but it can often get the job done.

If you add contenteditable="false" along with user-select:none; then Chrome will process the CSS rule correctly. Those elements will no longer be selectable.

The main disadvantage to this (besides having to modify the HTML) is that if one adds contenteditable="false" on a wrapper div then all its children become non-editable as well. You can further nest another contenteditable="true", which will allow the nested content to be editable, but then one cannot select from the nested content to the outside content.

Ultimately, a correct implementation of the CSS rule in Chrome when contenteditable is enabled would be the best solution. (Could be intentional due to user-select spec, see comment below)

Example of solution using contenteditable="false" (not on wrapper divs).

.ok {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.nope {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<divcontenteditable="true"readonly><spanclass="ok">One</span><spanclass="nope"contenteditable="false">Two</span><spanclass="ok">Three</span><div><spanclass="ok">One</span><spanclass="nope"contenteditable="false">Two</span><spanclass="ok">Three</span></div><spanclass="nope"contenteditable="false">One</span><spanclass="ok">Two</span><spanclass="nope"contenteditable="false">Three</span><div><spanclass="nope"contenteditable="false">One</span><spanclass="ok">Two</span><spanclass="nope"contenteditable="false">Three</span></div></div>