对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
使用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,您可以删除其他预定。
浏览器兼容性在这里
其他回答
您可以通过 : 之前使用此解决方案:
天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天
JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/
试着使用这个:
::selection {
background: transparent;
}
如果您想指定不在特定元素中选择,则只需在选择规则之前设置元素类或ID,例如:
.ClassNAME::selection {
background: transparent;
}
#IdNAME::selection {
background: transparent;
}
查看我的解决方案没有JavaScript:
吉普赛
首頁 〉外文書 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學
使用我的技术的Popup菜单: http://jsfiddle.net/y4Lac/2/
对于 Internet Explorer 此外,您还需要添加 pseudo class focus (.ClassName:focus) 和 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; /* Internet Explorer */
}
将此添加到您想要禁用文本选项的第一个 div 中:
onmousedown='return false;'
onselectstart='return false;'
