内容可编辑选择器?

时间:2016-07-27 16:51:01

标签: html css css-selectors

我想禁用为用户无法编辑的所有元素选择文本,例如文本或图像,但我仍然希望将其保留在您可以输入的元素中,例如输入或textareas。

要禁用文本选择,请使用以下命令:

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

但正如我所说,这会影响所有元素,所以我尝试使用这个选择器:

*[contenteditable=false]

而不只是*

但是由于某些原因这显然不起作用,CSS中是否有任何选择器来检测内容可编辑的元素?

1 个答案:

答案 0 :(得分:2)

您使用的是attribute selector,会在contenteditable attribute出现时选择。

您实际需要的是选择接受输入的元素的方法,因为没有共享选择器。您必须使用:not并列出所有此类标记(并且可能包含contenteditable属性选择器)。

*: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>