CSS 禁用文本选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10809995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS disable text selection
提问by Neil
Currently, I have put this in the body tag to disable text selections:
目前，我已将其放在 body 标签中以禁用文本选择：
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
However, my inputand textareaboxes are now unselectable. How can I only make these input elements selectable and the rest unselectable?
但是，我的input和textarea框现在无法选择。我怎样才能使这些输入元素可选择而其余的不可选择？
回答by Someth Victory
Don't apply these properties to the whole body. Move them to a class and apply that class to the elements you want to disable select:
不要将这些属性应用于整个身体。将它们移动到一个类并将该类应用于要禁用选择的元素：
.disable-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
回答by Rik
You could also disable user select on all elements:
您还可以在所有元素上禁用用户选择：
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
And than enable it on the elements you do want the user to be able to select:
然后在您确实希望用户能够选择的元素上启用它：
input, textarea /*.contenteditable?*/ {
-webkit-touch-callout:default;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
回答by Meglio
Just wanted to summarize everything:
只是想总结一切：
.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;"/>
回答by B T
::selection,::moz-selection {color:currentColor;background:transparent}
回答by Shahnawaz
you can disable all selection
您可以禁用所有选择
.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;}
now you can enable input and text-area enable
现在您可以启用输入和文本区域启用
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;}
回答by Starx
Use a wild card selector *for this purpose.
*为此使用通配符选择器。
#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;
}
Now, every element inside a div with id divwill have no selection.
现在，带有 id 的 div 中的每个元素div都将没有选择。
Demo
演示
回答by cristianojeda
Disable selection everywhere
到处禁用选择
input, textarea ,*[contenteditable=true] {
-webkit-touch-callout:default;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
IE7
IE7
<BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
回答by Eric Fortis
instead of bodytype a list of elements you want.
而不是body键入您想要的元素列表。
回答by starikovs
I agree with Someth Victory, you need to add a specific class to some elements you want to be unselectable.
我同意 Someth Victory 的观点，您需要为某些不想选择的元素添加一个特定的类。
Also, you may add this class in specific cases using javascript. Example here Making content unselectable with help of CSS.
此外，您可以在特定情况下使用 javascript 添加此类。此处示例在CSS 的帮助下使内容不可选择。
