Question

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

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

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

Answer 1

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

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

Answer 2

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

* {
    -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;
}

Answer 3

只是想总结一切：

.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;"/>

Answer 4

::selection,::moz-selection {color:currentColor;background:transparent}

Answer 5

您可以停用所有选择

.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;}

Answer 6

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

#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中的每个元素都没有选择。

Demo

Answer 7

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

Answer 8

我同意Someth Victory，你需要为你想要不可选择的元素添加一个特定的类。

此外，您可以使用javascript在特定情况下添加此类。示例Making content unselectable with help of CSS。

Answer 9

禁用所有地方的选择

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">

CSS禁用文本选择

9 个答案:

Demo