css3禁止选中文本

代码2018-04-021,626 人已阅来源：网络

通常大家会有js来实现，另一个方案就是，将-webkit-user-select 和-moz-user-select 的值设为none，这针对于移动用户，可能会很有用。

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

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}

附：user-select的介绍

user-select是在css3 UI规范中新增的一个功能，用来控制内容的可选择性。

语法

user-select:value;

可选参数

  • auto——默认值，用户可以选中元素中的内容
  • none——用户不能选择元素中的任何内容
  • text——用户可以选择元素中的文本
  • element——文本可选，但仅限元素的边界内(只有IE和FF支持)
  • all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。
  • -moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。

相关内容

  • css3按钮效果_超酷的css3按钮鼠标经过特效

    今天分享一个超酷的css3按钮鼠标经过特效，相信对大家对css3的学习和理解会有不小的帮助。具体请查看以下示例：aihongxin.combody{text-align:cen...

  • 移动端菜单按钮打开关闭css3小图标动画

    移动端菜单按钮打开关闭css3小图标动画，保存以便备用移动端菜单按钮打开关闭css3小图标动画body,html{height:100%;display:flex;justif...

  • 纯css3实现rate评分组件

    纯Css3实现的rate评分组件，应该能适配所有平台的高级浏览吧。原理上较为简单，理解起来也不难。整体思路上主要是对于Css3的选择器+~:checked的灵活应用，为了方便基...

  • CSS3嵌入字体@font-face调用字体

    @font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两...

  • BonBon-使用CSS3制作甜美的糖果按钮

    BonBon是一组使用CSS3制作的甜美的糖果按钮样式。在过去，我们都是使用图片或者JavaScript来实现漂亮的按钮效果，随着越来越多的浏览器对CSS3的支持和完善，使用C...

    BonBon-使用CSS3制作甜美的糖果按钮
  • 纯CSS3实现加载Loading动画效果

    以前传统使用loading的方法是一个gif动画小图片，但是扩展性不强，有时还会有锯齿。在越来越多的浏览器都支持css3时，尤其是在智能手机体验时，css3动画的loading...

    纯CSS3实现加载Loading动画效果
  • iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案

    iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案methods:{//ios端输入框弹起后自动回弹kickBack(){setTimeout(()=>{window...

  • Linux删除乱码文件方法

    在上传文件到服务器时可能会遇到一些突发情况，如：网络中断，这样会在服务器中产生乱码文件，这是你会发现使用rm-rf文件名，无法删除。虽不影响继续使用，但看着给人一种很不爽的感觉...

  • js中 => 的含义

    =>是es6语法中的arrowfunction(x)=>x+6相当于function(x){returnx+6;};详解了解：ES6箭头函数详解...

  • WordPress Rest-Api 自定义修改 wp-json 路由

    WordPressRest-Api提供了一个钩子rest_url_prefix可自定义修改wp-json路由，比如将默认的wp-json变更为api。Rest-Api路由示例默...

浏览更多有关 的内容