对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
对于 Internet Explorer 的 JavaScript 解决方案是:
onselectstart="return false;"
其他回答
我将各种浏览器 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>
在大多数浏览器中,可以通过使用用户选择的CSS属性的属性变量来实现这一点,最初提出,然后在CSS 3中被遗弃,现在在CSS UI级别4中提出。
*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in Internet Explorer 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
在 Internet Explorer < 10 和 Opera < 15 中,您需要使用您想要不可选择的元素的不可选择属性。
<div id="foo" unselectable="on" class="unselectable">...</div>
不幸的是,这个属性没有继承,这意味着你必须在 <div> 中每个元素的起点标签中放置一个属性,如果这是一个问题,你可以使用JavaScript以重复为元素的后代:
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
在某些浏览器(例如,Internet Explorer和Firefox)中,虽然不可能在未选择的元素中启动选项,但仍然不可能阻止在未选择的元素之前和之后开始的选项,而不会使整个文档不可选择。
这将是有用的,如果颜色选择也不需要:
::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }
...所有其他浏览器修复. 它将在 Internet Explorer 9 或更高版本中运行。
这种突出效果是由于所谓的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;
}
你可以使用任何颜色,如果你想得到它突出,否则你不能使用任何颜色。
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.unselectable = true;
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
-webkit-user-select: none;
-moz-user-select: none;
onselectstart="return false;"
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
* {
-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;
}
<div class="draggable"></div>
.draggable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.draggable input {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
if ($.browser.msie)
$('.draggable').find(':not(input)').attr('unselectable', 'on');
