对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
您可以使用 *- 用户选择的属性如下为此...
p {
-webkit-user-select: none; /* Chrome all and Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10 and later */
user-select: none; /* Likely future */
}
关于详细描述的链接
其他回答
试着使用这个:
::selection {
background: transparent;
}
如果您想指定不在特定元素中选择,则只需在选择规则之前设置元素类或ID,例如:
.ClassNAME::selection {
background: transparent;
}
#IdNAME::selection {
background: transparent;
}
您可以使用 *- 用户选择的属性如下为此...
p {
-webkit-user-select: none; /* Chrome all and Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10 and later */
user-select: none; /* Likely future */
}
关于详细描述的链接
你也可能想防止背景菜单出现,当触摸的元素,如按钮,他们的选择被阻止,这样做,添加这个代码到整个页面,或者只是这些按钮元素:
$("body").on("contextmenu",function(e){
return false;
});
如果您想要禁用除了 <p> 元素以外的任何内容的文本选项,您可以在 CSS 中这样做(请参阅 -moz-none 允许在子元素中过度排序,允许在其他浏览器中没有):
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
对于 Internet Explorer 的 JavaScript 解决方案是:
onselectstart="return false;"
