对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
与CSS-
div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; "unselectable='on' onselectstart="return false;" onmousedown="return false; } <div> Blabla <br/> 更多 Blabla <br/> 更多 Blabla... </div>
其他回答
这将是有用的,如果颜色选择也不需要:
::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }
...所有其他浏览器修复. 它将在 Internet Explorer 9 或更高版本中运行。
您可以使用 CSS 或 JavaScript。
JavaScript 模式支持较旧的浏览器,如旧版本的 Internet Explorer 也,但如果不是你的情况,使用 CSS 模式,然后:
HTML 和 JavaScript:
<html onselectstart='return false;'> <body> <h1> 这是标题!</h1> <p> 我是文本,如果你选择我,我不会被选中。
HTML / CSS:
.not-selectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <body class="not-selectable"> <h1>This is the Heading!</h1> <p>And I'm the text, I won't be selected if you select me.</p> </body>
在以前的答案中的解决方案中,选择已停止,但用户仍然认为您可以选择文本,因为路由器仍在变化。
.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>
这将使您的文本完全平坦,就像它在桌面应用程序中一样。
试着使用这个:
::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;
}
你可以使用任何颜色,如果你想得到它突出,否则你不能使用任何颜色。
