对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
您可以使用 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>
其他回答
如果您想使用 CSS 禁用整个页面的选择和突出,您可以轻松地将其应用到所有元素:
* {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
我看到很多详细的答案,但我认为写这个代码线应该足以完成所需的任务:
*{
-webkit-user-select: none;
}
对于那些在 Android 浏览器中与触摸事件取得相同的困难的人,请使用:
html, body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
雖然這個假設元素在CSS Selectors Level 3的草案中,但在候選人推薦階段中被移除,因為它顯然他的行為被低估,特別是與<unk>化元素,並且互動性未達成。
它正在讨论在如何 :: 选择工作在无缝元素。
尽管它正在在浏览器中实施,但您可以通过使用相同的颜色和背景颜色来创建一个不被选择的文本的幻觉,与选项卡设计(在您的情况下)。
正常的CSS设计
p { color: white; background: black; }
关于选择
p::-moz-selection { color: white; background: black; }
p::selection { color: white; background: black; }
不允许用户选择文本会引发可用性问题。
我将各种浏览器 CSS 选择属性与 Internet Explorer < 9 所需的不可选择标签相结合。
<style>
[unselectable="on"] {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer 10+/Edge */
user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
