对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
关于 WebKit 的文章:
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
我在 CardFlip 例子中发现了它。
其他回答
关于 WebKit 的文章:
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
我在 CardFlip 例子中发现了它。
你尝试过吗?
.disableSelect{
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-o-user-select: none;
-moz-user-select: none;
pointer-events:none;
}
您可以通过 : 之前使用此解决方案:
天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天
JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/
直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。
当然,这在不使用 Gecko 发射引擎的浏览器中不支持。
没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。
真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。
唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。
-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');