user-select的用法

前几天在网页制作中,发现有些地方的文字双击就会被选中,特别丑,一点也不美观,并且有些部分的需求就是文字不可以被选中或复制,在这种情况下,我们就可以用到 user-select 了。

1、作用
控制页面文字不能被选中

2、用法

user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all;/*Safari中不支持该属性值,只能使用none或者text,或者是在html的标签属性中使用*/

-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element; 

属性值:

none
元素和子元素的文本将无法被选中

text
文本可以被选中

auto
文本将根据浏览器的默认属性进行选择

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

contain、element
可以选择文本,但选择范围受元素边界的约束,也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer

注意:
浏览器实现之间的区别之一是继承。在Firefox中,-moz-user-select不是由绝对定位的元素继承的,但在Safari和Chrome中,-webkit-user-select却是由绝对定位的元素继承而来的。

3、浏览器的支持程度

这里写图片描述

参考文章:
http://developer.mozilla.org/en-US/docs/Web/CSS/user-select

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值