对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
快速黑客更新
如果您使用所有 CSS 用户选择的属性(包括浏览器预定),则仍然存在一个问题。
.div {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10+ */
user-select: none; /* Likely future */
}
正如CSS-Tricks所说,问题是:
WebKit 仍然允许文本复制,如果您选择周围的元素。
您也可以使用下面的一个,以确保一个完整的元素被选中,这意味着如果您点击一个元素,所有包含在该元素的文本将被选中。
.force-select {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* No support yet */
user-select: all; /* Likely future */
}
其他回答
除了Mozilla唯一的属性,不,没有办法用标准CSS(如现在)禁用文本选项。
如果您注意到, Stack Overflow 不会关闭其导航按钮的文本选择,我建议在大多数情况下不这样做,因为它改变正常的选择行为,并使其与用户的期望相矛盾。
这种突出效果是由于所谓的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 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。
当然,这在不使用 Gecko 发射引擎的浏览器中不支持。
没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。
真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。
唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。
在以前的答案中的解决方案中,选择已停止,但用户仍然认为您可以选择文本,因为路由器仍在变化。
.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>
这将使您的文本完全平坦,就像它在桌面应用程序中一样。
注意事项:
正确的答案是正确的,它阻止你能够选择文本,但是,它不会阻止你能够复制文本,因为我会显示下一对屏幕截图(如2014年11月7日)。
此分類上一篇
此分類上一篇
此分類上一篇
你可以看到,我们无法选择数字,但我们能够复制它们。
测试:Ubuntu,Google Chrome 38.0.2125.111。
