Murplyx Murplyx - 4 months ago 27
CSS Question

Content Editable selector?

I want to disable selecting text for all elements which a user cannot edit, for example text or images, but I still want to keep it for elements that you can type inside, like inputs or textareas.

To disable text selection, I use the following:

* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


But as I said, this effects all elements, so I tried using this selector:

*[contenteditable=false]


instead of just *

But this doesn't work apparently for some reason, is there any selector in CSS to detect content-editable elements?

Answer

You are using an attribute selector, which will select on the presence of the contenteditable attribute.

What you are actually looking for is a way to not select elements which accept input, for which there is no shared selector. You would have to use :not and list all such tags (and possibly include the contenteditable attribute selector).

*:not(input):not(textarea):not([contenteditable=""]):not([contenteditable="true"]) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<input value="input" />
<hr />
<textarea>textarea</textarea>
<hr />
<p>paragraph</p>
<hr />
<p contenteditable>paragraph editable</p>