CSS禁用文本选择

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