使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等,也就是,让页面内容不可选。也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素级别的,它不仅可以作用整个页面,也可以只在指定的元素和其子元素上生效。
写这篇文章的时候,“user-select”属性在各大浏览器里都还是实验性的属性,以后有可能废弃,也有可能转正,目前使用各种浏览器引擎前缀,它的作用还是能发挥的不错的。
我们来先看看user-select属性的语法:
- user-select: none;
- user-select: auto;
- user-select: text;
- user-select: contain;
- user-select: all;
- //火狐浏览器
- -moz-user-select: none;
- -moz-user-select: text;
- -moz-user-select: all;
- //谷歌浏览器
- -webkit-user-select: none;
- -webkit-user-select: text;
- -webkit-user-select: all;
- //IE
- -ms-user-select: none;
- -ms-user-select: text;
- -ms-user-select: all;
- -ms-user-select: element;
下面是“user-select”属性的属性值介绍:
none- 禁止用户选中
text- 对用户的选择没有限制
all- 目标元素将整体被选中,也就是说不能只选中一部分,在你用鼠标选中部分文字时,浏览器会自动选中整个元素里的内容。(谷歌浏览器里好像不太灵?)
使用CSS里的user-select属性控制用户在页面上选中的内容的更多相关文章
- H5_0026:使用CSS里的user-select属性控制用户在页面上选中的内容
CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...
- iOS - 使用WKWebView时OC调JS的user-select属性控制用户操作
// 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigatio ...
- CSS里一个奇怪的属性
事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...
- MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法
-----------------------------------来自网上的解决方法--------------------------------------------- ASP.Net MV ...
- Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮
Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:
- css,js,jquery的载入方式和属性控制
本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果 一,css的载入方式与属性控制 1.1,css引 ...
- canvas里设置width和css里设置width和js里设置width的区别
canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...
- Jquery循环select标签,并给指定option添加select属性后在页面上不显示的问题
<select id="testId"> <option value="">--请选择--</option> <opt ...
- CSS里的pointer-events属性
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...
随机推荐
- Hbase的写入负载均衡
在写Hbase的时候,会担心数据分布在各个region上不均匀(与预分区无关): 这个时候可能想到的方式:hash.加盐等(当然是可以的,但是读取的时候咋办呢? 哪天写一个这样的文章) 本文采用新方式 ...
- bash: cannot create temp file for here-document: Read-only file system
文件系统被强制只读问题,第一眼看到百度了一下,说可能磁盘坏了.卧槽我都吓懵了系统盘坏了,闹着玩呢,然后接着查资料,排查 mount 查看所有挂载,发现根目录的挂载权限是ro只读. /dev/sda2 ...
- nginx限制单个IP的最大连接数量限制下载速度
今天seafile服务因为测试在下载文件的时候,带宽占用过大,导致seafile客户端无法登陆的问题. 我们公司的seafile是通过nginx代理的8000端口,因此我这边通过修改nginx配置来解 ...
- Qt错误 —— 无法启动此程序 因为计算机丢失QtCore5.dll 以及 无法定位程序输入点于动态链接库QtCore5.dll
首先,设置计算机的环境变量Path,计算机=>右键属性=>高级设置=>环境变量=>系统变量=>双击Path,在Path后面增加C:\Qt\Qt5.8.0\5.8\ming ...
- Web服务API
Web服务API 内容 [ 隐藏 ] 1 概述 2个 services.php 3 详细教程 4 例子 5 另见 概观 Web服务API允许您将插件的功能(通常是外部函数)公开为Web服务. ...
- Jmeter元件——JSON Extractor后置处理器
场景使用 json extractor后置处理器用在返回格式为json的HTTP请求中,用来获取返回的json中的某个值.并保存成变量供后面的请求进行调用或断言等. 使用方法 1.常规操作 路径:选择 ...
- python数据结构之栈
栈 栈(stack),有些地方称为堆栈,是一种容器,可存入数据元素.访问元素.删除元素,它的特点在于只能允许在容器的一端(称为栈顶端指标,英语:top)进行加入数据(英语:push)和输出数据(英语: ...
- ord() expected string of length 1, but int found
源代码是这样: s=b'^SdVkT#S ]`Y\\!^)\x8f\x80ism' key='' for i in s: i=ord(i)-16 key+=chr(i^32) prin ...
- 【SQL】SQL整表复制
SQL Server中,如果目标表存在: 1 insert into 目标表 select * from 原表; SQL Server中,如果目标表不存在: 1 select * into 目标表 f ...
- Vue实现用户自定义上传头像裁剪
使用技术: vue.js2.0.cropperjs.canvas <template> <div id="app"> <div id=&q ...