您的位置:首页 > Web前端 > css > 正文

CSS3中user-select的用法

更多 时间:2017-5-12 类别:Web前端 浏览量:385

CSS3中user-select的用法

CSS3中user-select的用法

一、语法

user-select:none | text | all | element


默认值:text
适用于:除替换元素外的所有元素
继承性:无
动画性:否
计算值:指定值

 

二、取值说明

none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element:可以选择文本,但选择范围受元素边界的约束

 

三、user-select在各浏览器内核中的写法

-webkit-user-select: none;  /* Chrome all / Safari all /opera15+*/ 
-moz-user-select: none;     /* Firefox all */ 
-ms-user-select: none;      /* IE 10+ */ 

 

四、实例

  •  
  • 
    <style>
    .box{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    </style>
    
    
    <li class="box">
        测试实例
    </li>
    
    				
  •  

    标签:css