user-select的详细用法

GeekGhc 发布于2019-08-02 15:12 / 1200人阅读

摘要：只支持注意浏览器实现之间的区别之一是继承。在中，不是由绝对定位的元素继承的，但在和中，却是由绝对定位的元素继承而来的。

前言

做网页的时候，有些文字我们需要能被选中，有些我们不要能被选中，那么这就需要用到一个css属性了，那就是 user-select

使用方法

user-select: none|auto|text|contain|all;
 
/*firefox浏览器*/
-moz-user-select: none|text|all;
 
/*safari、chrome浏览器*/
-webkit-user-select: none|text|all; /*Safari中不支持该属性值，只能使用none或者text，或者是在html的标签属性中使用*/
 
/*ie浏览器*/
-ms-user-select: none|text|element;
 
属性值：
none :  元素和子元素的文本将无法被选中
text :  文本可以被选中
auto :  文本将根据浏览器的默认属性进行选择
all  :  当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
contain、element :  可以选择文本，但选择范围受元素边界的约束，也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer
 
注意： 
浏览器实现之间的区别之一是继承。在Firefox中，-moz-user-select不是由绝对定位的元素继承的，但在Safari和Chrome中，-webkit-user-select却是由绝对定位的元素继承而来的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53965.html

user-select的详细用法

摘要：只支持注意浏览器实现之间的区别之一是继承。在中，不是由绝对定位的元素继承的，但在和中，却是由绝对定位的元素继承而来的。前言做网页的时候，有些文字我们需要能被选中，有些我们不要能被选中，那么这就需要用到一个css属性了，那就是 user-select 使用方法 user-select: none|auto|text|contain|all; /*firefox浏览器*/ -moz...

seanlook 2019-08-30 11:02 评论0 收藏0
禁止用户选择的另一种思路（兼容 IE8）

摘要：禁止用户选择的另一种方法是在不想被选中的元素上面绑定事件并且返回。另一种思路伪类伪元素先上一个例子。标准当中方法可以用于所有的属性和元素当中，但是目前还没有任何一个浏览器实现了这个标准。 user-select 前端开发中常常会遇到一种需求，让某些元素的内容不能被选中，一般的做法会用 user-select: none 来做，由于 user-select 并不是标准的 CSS 属性，所...

Darkgel 2019-08-29 11:11 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
好看漂亮的html5网页特效学习笔记(5)_弧形菜单

摘要：定义标准的文本。然后看看函数的定义自启动来按下按钮的时差不能超过最大持续时间重新绘制菜单项的位置先用确定按下按钮的时间，储存在中。如果到了规定时间的话，就执行。然后再把取下的第一个当成第十三个接在最后面，又成了新的菜单排列。 showImg(https://segmentfault.com/img/bVbw1zV?w=818&h=479); 效果：弧形菜单，文字按规则变形以及变换透...

Guakin_Huang 2019-08-30 15:44 评论0 收藏0