CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等,也就是,让页面内容不可选。也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素级别的,它不仅可以作用整个页面,也可以只在指定的元素和其子元素上生效。

写这篇文章的时候,“user-select”属性在各大浏览器里都还是实验性的属性,以后有可能废弃,也有可能转正,目前使用各种浏览器引擎前缀,它的作用还是能发挥的不错的。

我们来先看看user-select属性的语法:

  1. user-select: none;
  2. user-select: auto;
  3. user-select: text;
  4. user-select: contain;
  5. user-select: all;
  6. //火狐浏览器
  7. -moz-user-select: none;
  8. -moz-user-select: text;
  9. -moz-user-select: all;
  10. //谷歌浏览器
  11. -webkit-user-select: none;
  12. -webkit-user-select: text;
  13. -webkit-user-select: all;
  14. //IE
  15. -ms-user-select: none;
  16. -ms-user-select: text;
  17. -ms-user-select: all;
  18. -ms-user-select: element;

下面是“user-select”属性的属性值介绍:

none
禁止用户选中
text
对用户的选择没有限制
all
目标元素将整体被选中,也就是说不能只选中一部分,在你用鼠标选中部分文字时,浏览器会自动选中整个元素里的内容。(谷歌浏览器里好像不太灵?)

使用CSS里的user-select属性控制用户在页面上选中的内容的更多相关文章

  1. H5_0026:使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  2. iOS - 使用WKWebView时OC调JS的user-select属性控制用户操作

    // 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigatio ...

  3. CSS里一个奇怪的属性

    事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...

  4. MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法

    -----------------------------------来自网上的解决方法--------------------------------------------- ASP.Net MV ...

  5. Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮

    Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:

  6. css,js,jquery的载入方式和属性控制

    本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果 一,css的载入方式与属性控制 1.1,css引 ...

  7. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  8. Jquery循环select标签,并给指定option添加select属性后在页面上不显示的问题

    <select id="testId"> <option value="">--请选择--</option> <opt ...

  9. CSS里的pointer-events属性

    现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...

随机推荐

  1. Python_shutil模块

    import shutil 高级的文件,文件夹,压缩包的处理模块,也主要用于文件的拷贝 shutil.copyfileobj(fsrc,fdst[,length]): 将文件的内容拷贝到另一个文件(可 ...

  2. http--tomcat--memcached配置

    两个tomcat节点:172.16.100.7(tomcatA.magedu.com),172.16.100.8(tomcatB.magedu.com) 两个memcached节点:172.16.10 ...

  3. ELK 环境搭建3-Logstash

    一.Logstash是一款轻量级的日志搜集处理框架,可以方便的把分散的.多样化的日志搜集起来,并进行自定义的处理,然后传输到指定的位置,比如某个服务器或者文件或者中间件. 二.搭建 1.因为要涉及到收 ...

  4. 006 使用SpringMVC开发restful API四--用户信息的修复与删除,重在注解的定义

    一:任务 1.任务 常用的验证注解 自定义返回消息 自定义校验注解 二:Hibernate Validator 1.常见的校验注解 2.程序 测试类 /** * @throws Exception * ...

  5. HBase读写数据的详细流程及ROOT表/META表介绍

    一.HBase读数据流程 1.Client访问Zookeeper,从ZK获取-ROOT-表的位置信息,通过访问-ROOT-表获取.META.表的位置,然后确定数据所在的HRegion位置: 2.Cli ...

  6. LightOJ 1074 - Extended Traffic 【SPFA】(经典)

    <题目链接> 题目大意:有n个城市,每一个城市有一个拥挤度Ai,从一个城市I到另一个城市J的时间为:(A(v)-A(u))^3.问从第一个城市到达第k个城市所花的时间,如果不能到达,或者时 ...

  7. Python自制微信机器人:群发消息、自动接收好友

    运营公众号也有半年了,今年5月份开始的,之前一直用一款windows工具来运营自动接受好友请求.群发文章.自动回复等操作,但颇有不便. 举几个场景: 突然在外面看到一篇文章很好,临时写了一篇,想群发一 ...

  8. type__元组、字典、集合

  9. Linux下的Hadoop安装(本地模式)

    系统为CentOS 6.9,Hadoop版本2.8.3,虚拟机VMware Workstation 主要介绍Linux虚拟机安装.环境配置和Hadoop本地模式的安装.伪分布式和Windows下的安装 ...

  10. 按键排序JavaScript对象

    问题描述 我需要按键排序JavaScript对象. 因此如下: { 'b' : 'asdsad', 'c' : 'masdas', 'a' : 'dsfdsfsdf' } 会成为: { 'a' : ' ...