CSS3 user-select 禁选文本

HTML5学堂:当我们在访问一个文章网站的时候,常常因为拖拽的时候误选文字,给我们的一种不好的用户体验,而我们可以用CSS3的user-select属性禁选文本来解决这个问题,另外为了防止用户的复制和转载,我们也可以使用user-select属性]解决这个问题.

请谨慎使用这个属性:因为大部分用户是来查看信息的,他们可以复制并存储下来以备将来之用,所以这种方法既无用也无效。如果你禁用了复制粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容。接下来我们具体来了解一下user-select属性。

基本语法:

user-select: value;

value取值:

auto默认值,用户可以选中元素中的内容

none用户不能选择元素中的任何内容

text用户可以选择元素中的文本

element文本可选,但仅限元素的边界内(只有IE和FF支持)

all在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中,IE不支持改值。

禁选文本书写方式:

我们先来看个效果:

1.结构代码

  1. <div class="h5course">欢迎沟通交流 ~ HTML5学堂!</div>

2.样式代码

  1. .h5course {
  2. -webkit-user-select: none; /*webkit浏览器*/
  3. -moz-user-select: none; /*火狐*/
  4. -ms-user-select: none; /*IE10*/
  5. -khtml-user-select: none; /*早期浏览器*/
  6. user-select: none;
  7. }

3.查看效果

未禁用文本效果:

禁用文本效果:

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源优测

Python Selenium设计模式-POM

前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点、应用场景和核心思想有一定的理解和掌握。...

2413
来自专栏从零开始学 Web 前端

从零开始学 Web 之 BOM(一)BOM的概念,一些BOM对象

window 是浏览器的顶级对象,当调用 window 下的属性和方法时,可以省略 window。

723
来自专栏我爱编程

Day25Web开发

HTTP协议简介 在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP...

3346
来自专栏挖坑填坑

Angular练习之animations动画

让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定...

631
来自专栏程序员的碎碎念

ThinkPHP基础知识(二)

今天闲来无事,继续来看我们的tp下一个教程(勉强叫做这个吧)。看前面的博客文章我们知道: ? 那么,我们怎么创建控制器和方法呢? 一、创建控制器和方法 创建控制...

3446
来自专栏开源优测

Python Selenium设计模式-POM

前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点、应用场景和核心思想有一定的理解和掌握。...

2644
来自专栏菩提树下的杨过

如何在不影响asp.net默认安全性的前提下使用ckeditor/fckeditor?

asp.net默认情况下,不允许提交包含html源代码的表单,这在很大程度上防止了跨站(提交)攻击,但是ckeditor/fckeditor之类的富文本编辑器肯...

2139
来自专栏开源优测

Python Selenium设计模式-POM

前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点、应用场景和核心思想有一定的理解和掌握。...

2626
来自专栏开源优测

Python Selenium设计模式-POM

前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点、应用场景和核心思想有一定的理解和掌握。...

3477
来自专栏向治洪

React Native项目组织结构介绍

代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组...

1707

扫描关注云+社区