对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
更新2017年1月:
根据我可以使用,用户选择 + -webkit 用户选择为 Safari 足以实现所有主要浏览器所需的行为。
以下是所有可用的正确的CSS变量:
.noselect { _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
请注意,用户选择正在标准化过程中(目前在W3C工作草案中)。它不保证到处工作,浏览器之间可能存在实施差异。
更多信息可在 Mozilla Developer Network 文档中找到。
这个属性的价值是无,文本,条形,元素,元素,所有和继承。
其他回答
试着使用这个:
::selection {
background: transparent;
}
如果您想指定不在特定元素中选择,则只需在选择规则之前设置元素类或ID,例如:
.ClassNAME::selection {
background: transparent;
}
#IdNAME::selection {
background: transparent;
}
这种突出效果是由于所谓的Hover(onMouseHover)的行动。
当你在任何选项卡上滑动时,它的颜色将被更改。
比如说,
HTML 代码
<div class="menu">
<ul class="effect">
<li>Questions</li>
<li>JOBS</li>
<li>Users</li>
</ul>
</div>
CSS 代码
.effect:hover {
color: none;
}
你可以使用任何颜色,如果你想得到它突出,否则你不能使用任何颜色。
这不是CSS,但值得一提:
jQuery UI 无法选择:
$("your.selector").disableSelection();
除了Mozilla唯一的属性,不,没有办法用标准CSS(如现在)禁用文本选项。
如果您注意到, Stack Overflow 不会关闭其导航按钮的文本选择,我建议在大多数情况下不这样做,因为它改变正常的选择行为,并使其与用户的期望相矛盾。
你也可能想防止背景菜单出现,当触摸的元素,如按钮,他们的选择被阻止,这样做,添加这个代码到整个页面,或者只是这些按钮元素:
$("body").on("contextmenu",function(e){
return false;
});
