您的位置:首页 > Web前端 > CSS

css禁止文字被选中

2018-03-12 22:13 309 查看
有时候,为了让用户有更好的体验,需要禁用掉文本选中功能

比如:使用a标签模拟按钮,如果不禁用掉文本选中功能,那么双击时会选中文字,用起来很不爽。

多数情况下,只需要使用CSS样式就可以实现这个功能啦:

body{
-o-user-select: none;
-moz-user-select: none; /*火狐 firefox*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10+*/
-khtml-user-select :none; /*早期的浏览器*/
user-select: none;
}


user-select有四个值:

  none:文本不能被选择

  text:可以选择文本

  all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

  element:可以选择文本,但选择范围受元素边界的约束

值得注意的是:IE6-9目前需要通过JavaScript来实现。

document.body.onselectstart = document.body.ondrag = function(){
return false;
}


版权声明:本文为博主原创文章,未经博主允许不得转载

http://blog.csdn.net/qq_39241443/article/details/79451433
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  禁止选中文字 CSS