使用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 ...
随机推荐
- ncat
ncat 或者说 nc 是一款功能类似 cat 的工具,但是是用于网络的.它是一款拥有多种功能的 CLI 工具,可以用来在网络上读.写以及重定向数据. 它被设计成可以被脚本或其他程序调用的可靠的后端工 ...
- Flask---第一个例子--使用Flask写的【Hello World !】的web程序
from flask import Flask;------->引入Flask插件,pip install Flask; app=Flask(__name__) #变量app是Flask的一个实 ...
- js设置元素不能编辑
js设置元素不能编辑 $("#startLocation").attr("readOnly",true); js设置元素可以编辑 $("#startL ...
- TensorFlow卷积层-函数
函数1:tf.nn.conv2d是TensorFlow里面实现卷积的函数,实际上这是搭建卷积神经网络比较核心的一个方法 函数原型: tf.nn.conv2d(input,filter,strides, ...
- 【python】常用第三方模块
No1: [Pillow]图像处理标准库 缩放 from PIL import Image # 打开一个jpg图像文件,注意是当前路径: im = Image.open('test.jpg') # 获 ...
- 网络编程-线程-3、通过继承Thread类创建线程
知识点:之前第一节介绍创建线程的方法是:通过threading.Thread(target=函数名不要加括号)创建一个对象,通过对象调用start方法创建并启动线程: ...
- POJ 2418 Hardwood Species 【Trie树】
<题目链接> 题目大意: 给你一堆字符串,让你按字典序输出他们出现的频率. 解题分析: 首先,这是Trie数词频统计的题目,以Trie树的边储存字母,节点存储以该节点结尾的链所代表的字符串 ...
- Cisco 12系列 AP 初始化配置-2-初始化配置
用于SSH登陆这个设备 bridge irb bridge 1 route ip 开启路由功能 interface BVI1 ip address 10.15.106.44 255.255.255. ...
- 【Excel】将IP按照IP地址(v4)增长序列排序
Background: Excel列中,有多个net-block, 将这些net-block按照IP地址(v4)自己的大小从小到大排序. Idea: IPv4地址的格式是点分十进制的,也就是说每一个点 ...
- Java并发编程:volatile关键字解析zz
volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...