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. python 存储数据

    如何进行数据存储,很多程序都要求用户输入某种信息,如让用户存储游戏首选项或提供要可视化的数据. 使用模块json进行数据存储. 1.1.使用json.dump()和json.load() #-*- e ...

  2. Spark Streaming运行流程及源码解析(一)

    本系列主要描述Spark Streaming的运行流程,然后对每个流程的源码分别进行解析 之前总听同事说Spark源码有多么棒,咱也不知道,就是疯狂点头.今天也来撸一下Spark源码. 对Spark的 ...

  3. Go语言实现:【剑指offer】包含min函数的栈

    该题目来源于牛客网<剑指offer>专题. 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数. 时间复杂度应为O(1). Go语言实现: var myList = ...

  4. ajax面试要点

    目录 目录 ajax是什么? 优点 缺点 ajax的工作原理 如何创建一个ajax(ajax的交互模型) ajax过程中get和post的区别 同步和异步的区别 JavaScript 的同源策略 如何 ...

  5. malloc返回地址的对齐问题

    http://man7.org/linux/man-pages/man3/malloc.3.html RETURN VALUE         top The malloc() and calloc( ...

  6. 【转载】s19文件格式详解

    来源:http://blog.csdn.net/xxxl/article/details/19494187 1.概述 为了在不同的计算机平台之间传输程序代码和数据,摩托罗拉将程序和数据文件以一种可打印 ...

  7. React中ref的使用

    直接获取DOM元素时使用的,一般情况下尽量不要使用ref

  8. oracle-11g-R2监听文件配置

    客户端连接oracle数据库时出现如下错误: Listener refused the connection with the following error: ORA-, TNS:listener ...

  9. python3-cookbook笔记:第八章 类与对象

    python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...

  10. ES6 - 基础学习(4): 模板字符串和字符串新增方法

    模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...