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. Exchange2010安装指南

    安装流程参考下面的: https://jingyan.baidu.com/article/2c8c281d6893680008252a9c.html 安装环境:windows server 2008( ...

  2. latex使用总结

    1 输入双引号以及单引号: 双引号:按两下 Tab键上方的键, 再按两下单引号键. 单引号:按一下Tab键上方的键,再按一下单引号键. 原文地址 2 时间复杂度的O写法: $\mathcal{O}$ ...

  3. Codeforces_731_F

    http://codeforces.com/problemset/problem/731/F 其实是暴力枚举,但是有些小技巧,直接保存每个数的数量. 枚举每个起点时,然后依次加上起点大小的分段的数量的 ...

  4. 未来图书-需求分析——脑机接口、VR、AI推荐系统

    个人比较喜欢科幻作品,也常常畅想未来.. "书"作为几千年来人类文明信息载体,必然会不断演变.. 文荟宿舍墙上贴着Elon Musk的海报,向往像他一样能够在有限的生命中用极致的想 ...

  5. 51nod 1133 不重叠的线段 (贪心,序列上的区间问题)

    题意: 最多能选几条不重叠的线段 思路: 按R从小到大排序,维护一个最大的右端点 右端点最小的那个线段是必选的,可以贪心地证明 代码: #include<iostream> #includ ...

  6. Ant Design Vue Pro 项目实战-项目初始化(一)

    写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...

  7. 获取页面form表单对象的方式

    w3c并没有提供标准的这种使用方式,所以各浏览器实现会有差异,还是使用标准的w3c标准,getElement的方式. 记录下,老是忘记 使用documen对象的方法 getElementxxx 方式, ...

  8. spring cloud微服务快速教程之(十一) Sleuth(zipkin) 服务链路追踪

    0.前言 微服务架构上众多微服务通过REST调用,可能需要很多个服务协同才能完成一个接口功能,如果链路上任何一个服务出现问题或者网络超时,都会形成导致接口调用失败.随着业务的不断扩张,服务之间互相调用 ...

  9. chrome报错:您目前无法访问 因为此网站使用了 HSTS

    chrome报错:您目前无法访问 因为此网站使用了 HSTS 其然: 现象 :访问github仓库报错'您目前无法访问XXXX 因为此网站使用了 HSTS' 解决方法:清理HSTS的设定,重新获取.c ...

  10. Android之ScrollView嵌套ListView冲突 (listView只显示一行)

    在ScrollView中嵌套使用ListView,ListView只会显示一行多一点.两者进行嵌套,即会发生冲突.由于ListView本身都继承于ScrollView,一旦在ScrollView中嵌套 ...