CSS禁用文本选择

92

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

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

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

css

— 尼尔
source

我能够选择input和textarea元素：jsfiddle.net/Smy26

— Sampson，

看起来webkit允许对这些元素进行选择，但是moz不允许。

— 基督教徒

5

CSS规则的

— Mottie 2013年

171

请勿将这些属性应用于整个身体。将它们移到一个类上，然后将该类应用于要禁用的元素，请选择：

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

— 胜利
source

3

Chrome，Safari 不支持。

— knutole 2014年

5

@knutole再次阅读表。该值的element在Chrome / Safari浏览器不支持。

— MForMarlon 2014年

31

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

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

— 里克
source

1

为了获得完整的浏览器支持，您应该在<body>或<div>元素中添加以下属性：unselectable =“ yes” onselectstart =“ return false” onmousedown =“ return false” / *请谨慎使用，最后一个属性可能会影响现有的功能* /

— 丹

11

只是想总结一切：

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

— 梅廖
source

1

旧版本的Firefox可能需要在HTML中添加一个新属性：onmousedown =“ return false”

— 2013年

2

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

— 英国电信
source

如此处所述，w3schools.com/cssref/sel_selection.asp。到目前为止，这不是任何CSS规范的一部分，并且Firefox需要-moz-。所以正确的应该是：::-moz-selection {color：currentColor; background：transparent} :: selection {color：currentColor; background：transparent}

— Vladislav

1

@Vladislav关于moz前缀的要点。老实说，不要相信w3schools。它是如此可怕的来源。MDN提供了实际的浏览器兼容性版本，并指出从CSS草案中删除了:: selection，但又添加了BUT：developer.mozilla.org/en-US/docs/Web/CSS/ ::selection 。另一个注意事项，firefox已准备好消除对前缀的需要：bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

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

— 沙纳瓦兹
source

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

演示版

— 斯塔克斯
source

0

而不是body键入所需元素的列表。

— 埃里克·富蒂斯（Eric Fortis）
source

0

我同意Someth Victory的观点，您需要向某些您希望无法选择的元素添加特定的类。

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

— 斯塔尼科夫斯
source

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

— 克里斯蒂亚诺耶达
source