对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
这不是CSS,但值得一提:
jQuery UI 无法选择:
$("your.selector").disableSelection();
其他回答
使用SASS(SCSS合成)
你可以用混合物做到这一点:
// Disable selection
@mixin disable-selection {
-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 */
}
// No selectable element
.no-selectable {
@include disable-selection;
}
在HTML标签中:
<div class="no-selectable">TRY TO HIGHLIGHT. YOU CANNOT!</div>
在这个 CodePen 中尝试一下。
如果您正在使用 Autoprefixer,您可以删除其他预定。
浏览器兼容性在这里
要得到我需要的结果,我发现我不得不使用:选择和用户选择
input.no-select:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.no-select::selection {
background: transparent;
}
input.no-select::-moz-selection {
background: transparent;
}
关于 WebKit 的文章:
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
我在 CardFlip 例子中发现了它。
直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。
当然,这在不使用 Gecko 发射引擎的浏览器中不支持。
没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。
真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。
唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。
注意事项:
正确的答案是正确的,它阻止你能够选择文本,但是,它不会阻止你能够复制文本,因为我会显示下一对屏幕截图(如2014年11月7日)。
此分類上一篇
此分類上一篇
此分類上一篇
你可以看到,我们无法选择数字,但我们能够复制它们。
测试:Ubuntu,Google Chrome 38.0.2125.111。
