对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
这在某些浏览器中工作:
::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
简单地将您所需的元素/ID 添加到由无空间的 commas 分开的选择器前面,如下:
h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}
其他答案是更好的;这可能应该被视为最后的避难所 / 冲突。
其他回答
在以前的答案中的解决方案中,选择已停止,但用户仍然认为您可以选择文本,因为路由器仍在变化。
.noselect { cursor: 默认; -webkit-touch-callout: 无; -webkit-user-select: 无; -khtml-user-select: 无; -moz-user-select: 无; -ms-user-select: 无; user-select: 无; } <p> 可选文本. </p> <p class="noselect"> 不可选文本. </p>
这将使您的文本完全平坦,就像它在桌面应用程序中一样。
你尝试过吗?
.disableSelect{
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-o-user-select: none;
-moz-user-select: none;
pointer-events:none;
}
您可以通过 : 之前使用此解决方案:
天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天
JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/
直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。
当然,这在不使用 Gecko 发射引擎的浏览器中不支持。
没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。
真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。
唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。
如果您想要禁用除了 <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;
}
