css - CSS规则禁用文本选择突出显示

  显示原文与译文双语对照的内容

对于类似按钮( 例如,问题,标签用户 等等 顶部的堆栈溢出页) 或者标签的锚点,如果用户意外选择了文本,是否有一个CSS标准方法来禁用加亮效果?

我意识到这可以用JavaScript完成,而一个小的谷歌则产生了 Mozilla-only -moz-user-select 选项。

是否有standard-compliant方法来实现这个功能,如果没有,那么"最佳实践"方法是什么?

时间:

所有正确的CSS变体如下:


.noselect {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

<p>
 Selectable text.
</p>
<p class="noselect">
 Unselectable text.
</p>

更多信息可以在这里找到

在大多数浏览器中,可以使用 proposed-but-now-defunct CSS3 user-select 属性 。xml上的专有变体实现:


*.unselectable {
 -moz-user-select: none;
 -khtml-user-select: none;
 -webkit-user-select: none;

/*
 Introduced in IE 10.
 See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
 */
 -ms-user-select: none;
 user-select: none;
}

对于 IE <10和 Opera,你需要使用要作为unselectable的元素的unselectable 属性。 你可以使用HTML中的属性来设置:


<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"));


更新 30 2014年04月: 这棵树遍历需要re-run,每当一个新元素被添加到树,但似乎从 @Han 发表评论,可以避免这个事件处理程序通过添加 mousedownunselectable 目标的事件。 有关详细信息,请参阅 http://jsbin.com/yagekiji/1


这还没有涵盖所有的可能性。 虽然不可能启动选择在unselectable元素,在一些浏览器( IE 和 Firefox,例如) 仍然无法避免的选择,开始之前和结束之后 unselectable unselectable元素没有使整个文档。

如果要禁用除 <p> 元素以外的所有内容的文本选择,可以在 CSS ( 注意 -moz-none 允许在sub-elements中重写,它允许在其他浏览器中使用 none ) 中执行以下操作:


* {
 -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;
}

你可以在 Firefox 和 Safari ( Chrome ) 中这么做?


::selection { background: transparent; }
::-moz-selection { background: transparent; }

直到 CSS 3 的user-select 属性才可用,基于的浏览器将支持你已经找到的-moz-user-select 属性。

在不使用Gecko渲染引擎的浏览器中,当然不支持这一点。

没有符合"标准"的快速简便的方法;使用JavaScript是一个选项。

真正的问题是,为什么你希望用户不能突出显示并推测复制和粘贴某些元素? 我没有遇到过一次,我不想让用户突出显示我网站的某一部分。 我的几个朋友在花了好几个小时阅读和编写代码后,将使用突出显示功能来记住页面上的位置,或者提供一个标记,以便他们的眼睛知道下一步的位置。

我唯一能看到这一点的地方是,如果你的表单有一个不应该复制和粘贴的按钮,如果用户复制并粘贴了该网站。

web sphere web kit的解决方案:


/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

我在一个CardFlip示例中找到它。

我喜欢混合 CSS + jQuery解决方案。

使内部所有元素 <div class="draggable"></div> unselectable,使用这个 CSS:


.draggable {
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-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; 
 }

然后,如果你使用 jQuery,在 $(document).ready() 块中添加它:


if (($.browser.msie && $.browser.version <10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

我想你仍然希望任何输入元素都是 interactable,因此 :not() pseudo-selector 。 如果你不关心的话,你可以使用 '*'

警告:IE9可能不需要额外的jQuery Fragment,所以你可能需要在其中添加一个版本检查。

对于 IE 此外,你需要添加伪类重点 ( 。类名:焦点) 和 outline-style:none


.ClassName,
.ClassName:focus {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 outline-style:none;/*IE*/
}

工作

CSS


 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 -webkit-user-select: none;

这应该是有效的,但对旧浏览器不起作用,有一个浏览器兼容性问题

...