使用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 ...
随机推荐
- 【Android】Android 代码判断当前设备是否为模拟器
[Android]Android 代码判断当前设备是否为模拟器 方法比较简单,直接粘贴代码 //判断当前设备是否是模拟器.如果返回TRUE,则当前是模拟器,不是返回FALSE public stati ...
- net core体系-web应用程序-4net core2.0大白话带你入门-10asp.net core session的使用
asp.net core session的使用 Session介绍 本文假设读者已经了解Session的概念和作用,并且在传统的.net framework平台上使用过. Asp.net core ...
- Python题目练习(二)
1.如何实现对python列表去重,并保持原来顺序 li = [1,2,5,3,1,6,3,8,0,3,2,4] l = [] for i in li: if i not in l: l.append ...
- TopCoder SRM502 Div1 1000 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/SRM502-1000.html SRM502 Div1 1000 题意 从 [0,n-1] 中选择 k 个不同的 ...
- Codeforces 264C Choosing Balls 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/CF264C.html 题目传送门 - CF264C 题意 给定一个有 $n$ 个元素的序列,序列的每一个元素是个 ...
- mniui里面没有只显示年的控件,monthpicker显示年月,datepicker显示具体到天的日期
spinner无法出现下拉框,只能一下下的点击. combobox可以出现下拉框,但是一般情况是从url后台取值. 现在可以自己在js里定义需要的值. <td><input id=& ...
- VS2017动态链接库(.dll)的生成与使用
转 https://blog.csdn.net/m0_37170593/article/details/76445972 这里以VS2017为例子,讲解一下动态链接库(.dll)的生成与使用. 一.动 ...
- html5手势操作与多指操作封装与Canvas图片裁切实战
当前情况,移动端的开发占比越来越高,单指的拖拽触碰等操作是常规需要.特殊的多指操作与手势操作还需另做处理,而且还涉及到兼容性问题. // 屏幕上存在两根或两根以上的手指 时触发 仅IOS存在手势事件, ...
- Linux安装Elasticsearch
本文介绍Linux环境如何安装Elasticsearch. 本文环境是在腾讯云服务器CentOS7.2搭建的,JDK1.8,elasticsearch-5.4.2. 1 安装JDK 网上教程很多,也可 ...
- [Win] Win8权限机制导致R安装包失败
在Rstudio安装tidyselect的时候,提示 ERROR: compilation failed for package ‘tidyselect’ 搜了一下,在github上找到tidysel ...