对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
查看我的解决方案没有JavaScript:
吉普赛
首頁 〉外文書 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學
使用我的技术的Popup菜单: http://jsfiddle.net/y4Lac/2/
其他回答
我从CSS-Tricks网站上学到了。
user-select: none;
这也是:
::selection {
background-color: transparent;
}
::moz-selection {
background-color: transparent;
}
::webkit-selection {
background-color: transparent;
}
将此添加到您想要禁用文本选项的第一个 div 中:
onmousedown='return false;'
onselectstart='return false;'
更好的是,您可以禁用文本选择。
如果你喜欢Sass(SCSS),而你不想使用Compass,你可以这样做:
风格.scss
@mixin user-select($select) {
-webkit-touch-callout:#{$select};
@each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
#{$pre + user-select}: #{$select};
}
#{user-select}: #{$select};
}
.no-select {
@include user-select(none);
}
与CSS-
div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; "unselectable='on' onselectstart="return false;" onmousedown="return false; } <div> Blabla <br/> 更多 Blabla <br/> 更多 Blabla... </div>
使用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,您可以删除其他预定。
浏览器兼容性在这里
