CSS 禁用文本选择

目前，我已经把它放在 body 标签中，以禁用文本选择:

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

但是，我的 input和 textarea框现在是不可选择的。我如何才能只使这些输入元素可选，而其他元素不可选？

187063 次浏览
小开

不要使用 body，而是键入所需元素的列表。

小开
最佳答案

不要将这些属性应用于整个身体。将它们移动到一个类中，并将该类应用于要禁用 select 的元素:

.disable-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
小开

我同意有些胜利，你需要添加一个特定的类的一些元素，你想是不可选择的。

此外，您可以使用 javascript 在特定的情况下添加这个类。

小开

为此使用通配符选择器 *。

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

现在，id 为 div的 div 中的每个元素都没有选择。

演示

小开

您还可以禁用所有元素上的用户选择:

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

然后在希望用户能够选择的元素上启用它:

input, textarea /*.contenteditable?*/ {
-webkit-touch-callout:default;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
小开

我只是想总结一下:

.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


<div class="unselectable" unselectable="yes" onselectstart="return false;"/>
小开

禁用所有选项

input, textarea ,*[contenteditable=true] {
-webkit-touch-callout:default;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
小开 
::selection,::moz-selection {color:currentColor;background:transparent}
小开

您可以禁用所有选择

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

现在您可以启用输入和文本区域启用

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

提交答案