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 条评论
登录 后参与评论

相关文章

来自专栏挖坑填坑

Angular练习之animations动画

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

1031
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

1785
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种新增控件(2)

本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。...

34610
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

713
来自专栏Jerry的SAP技术分享

巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验

这篇文章介绍一种使用代理设计模式(Proxy Design Pattern)的方法来改善您的前端应用里图片加载的体验。

1004
来自专栏九彩拼盘的叨叨叨

如何调试CSS动画

我们在做某个复杂的动画,或者多个元素同时做动画时,我们需要查看动画在某些时间点的元素的状态。此时动画应该是暂停的,这样方便我们进行查看。

593
来自专栏Google Dart

AngularDart Material Design 应用布局 顶

应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏,抽屉和导航样式。

1623
来自专栏JetpropelledSnake

Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)

1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 ------------------------------------------...

3344
来自专栏码生

自定义 AlertView,自定义图片icon,自定义按钮样式,自定义内容

872
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

5037

扫码关注云+社区