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
目标元素将整体被选中,也就是说不能只选中一部分,在你用鼠标选中部分文字时,浏览器会自动选中整个元素里的内容。(谷歌浏览器里好像不太灵?)

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

  1. 使用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. canvas里设置width和css里设置width和js里设置width的区别

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

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

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

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

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

  8. CSS里的pointer-events属性

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

  9. css常见的易混淆属性和值的区别(一)

    css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...

随机推荐

  1. 位运算在状态压缩DP中的应用

    一.判断一个数字X的i位是不是1 方法:   << (i-)) & x > )  原理: 1左移(i-1)位,相当于制造了一个就i位上是1其他位都是0的一个二进制数.将这个数 ...

  2. Http POST 提交 415错误 Unsupported Media Type 解决方案

    1 问题 在调用webapi post 提交时出现 415 Unsupported Media Type 错误 前端代码如下: $.post("/api/student/poststuden ...

  3. HDU_1506_单调栈

    http://acm.hdu.edu.cn/showproblem.php?pid=1506 从栈底到栈顶从小到大排序,碰到比栈定小的元素,出栈处理,直到栈顶比元素小或者栈为空. 数组最后多加了个-1 ...

  4. AI产品经理工作流程——需求分析和产品设计

    1.AI产品设计常见失败原因 技术驱动产品设计,即我有什么技术就做什么产品.尽管许多公司不惜重金招聘高级AI算法工程师,确实这样也能帮助企业拿到大量的融资,但也容易给公司带来技术决定产品设计的局限.然 ...

  5. 《C# GDI+ 破境之道》:第一境 GDI+基础 —— 第一节:画直线

    今天正式开一本新书,<C# GDI+ 破镜之道>,同样是破镜之道系列丛书的一分子. 关于GDI+呢,官方的解释是这样的: GDI+ 是 Microsoft Windows 操作系统的窗体子 ...

  6. Spark中的RDD和DataFrame

    什么是DataFrame 在Spark中,DataFrame是一种以RDD为基础的分布式数据集,类似于传统数据库中的二维表格. RDD和DataFrame的区别 DataFrame与RDD的主要区别在 ...

  7. 阿里云服务器ECS Ubuntu18.04 初次使用配置教程(图形界面安装)

    最近由于工作需要,要使用服务器测试,就先自已买了个服务器,就在阿里云买了一个,先买了那个叫虚拟主机的,后来发现不是我需要的,所以退了,就先了这个ECS主机.3年.如果购买就上图了.下面直接进入正题. ...

  8. Kubernetes最新版核心命令

    #查看所有namespace的pods运行情况 kubectl get pods --all-namespaces #查看具体pods,记得后边跟namespace名字哦 kubectl get po ...

  9. Linux运维--实践-Rally

    1.rally简介 OpenStack Rally 是一个自动化测试工具,社区希望通过 Rally 来解答 "How does OpenStack work at scale?(如何规模化运 ...

  10. C++ substr 截取子串

    1. substr() 方法使用 string substr (size_t pos = 0, size_t len = npos) const;pos: 截取初始位置(从头开始截取pos=0)len ...