118

目前，我已将其放在 body 标记中以禁用文本选择：

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

但是，我的input和textarea框现在无法选择。我怎样才能只使这些输入元素可选择而其余的不可选择？

4

9 回答 9

201

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

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
于 2012-05-30T04:52:32.597 回答
37

您还可以在所有元素上禁用用户选择：

* {
    -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;
}
于 2012-10-25T11:59:00.587 回答
13

只是想总结一切：

.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;"/>
于 2013-03-07T14:04:23.353 回答
2 
::selection,::moz-selection {color:currentColor;background:transparent}
于 2015-05-21T21:40:55.700 回答
2

您可以禁用所有选择

.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;}
于 2017-01-16T10:07:44.770 回答
1

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

#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都将没有选择。

演示

于 2012-05-30T05:56:46.810 回答
0

而不是body键入您想要的元素列表。

于 2012-05-30T04:31:48.363 回答
0

我同意 Someth Victory 的观点，您需要为某些您希望不可选择的元素添加一个特定的类。

此外，您可以在特定情况下使用 javascript 添加此类。此处示例借助 CSS 使内容无法选择。

于 2012-05-30T05:52:16.810 回答
0

到处禁用选择

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">
于 2014-04-21T14:17:53.530 回答