css3的user-select属性设置文本内容能否被选择

迷南。 2023-06-04 04:49 5阅读 0赞

CSS3中提供了个user-select属性来设置或检索是否允许用户选中文本。

**语法**

user-select：none | text | all | element。

默认值：text。

适用性：除替换元素外的所有元素。

继承性：无。

动画性：否。

计算值：指定值。

**取值**

none：文本不能被选择。

text：可以选择文本（默认值）。

all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element：可以选择文本，但选择范围受元素边界的约束。

**说明、兼容性与注意事项**

该属性用于设置或检索是否允许用户选中文本。

1.IE6~9不支持该属性，但支持使用标签属性【onselectstart="return false;"**】**来达到【user-select: none;**】**的效果。

2.Safari和Chrome也支持该标签属性。

3.Opera直到12.5仍然不支持该属性，但和IE6~9一样，也支持使用私有的标签属性【unselectable="on"】来达到【user-select: none;**】 **的效果。

4.unselectable的另一个值是off（默认值）。

5.除Chrome和Safari外，在其它浏览器中，如果将文本设置为【-ms-user-select: none;】，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为【-ms-user-select: none;】的区域文本，即文本的选择是具有连续性的，这个属性在除了Chrome和Safari外的其他浏览器上也不具备即时打断文本连续选择的特性。

6.这个属性对应的脚本特性为userSelect。

**简单示例**

<style>
    .testUserSelect{
         
    　　padding: 10px;
    　　-webkit-user-select: none;
    　　-moz-user-select: none;
    　　-o-user-select: none;
    　　user-select: none;
    　　background-color: #eeeeee;
    }
    </style>
    
    <div class="testUserSelect" onselectstart="return false;" unselectable="on">选我试试，选到我就让你嘿嘿嘿。</div>

选我试试，选到我就让你嘿嘿嘿。

"世界那么大，可我还是遇见了你。世界那么小，可我还是弄丢了你。"

转载于:https://www.cnblogs.com/yanggb/p/11433427.html

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3属性选择器(CSS3)

CSS3属性选择器(CSS3) <!DOCTYPE html> <html lang="en"> <head> <met

约定不等于承诺〃/ 2023年10月03日 13:31/ 0 赞/ 24 阅读

相关 CSS3-属性选择器

属性选择器通过标签中存在的属性来选择特定的 HTML 元素语法： `element[Attribute_Name]` `element` HTML 元素

蔚落/ 2023年07月02日 03:19/ 0 赞/ 27 阅读

相关 css3的user-select属性设置文本内容能否被选择

CSS3中提供了个user-select属性来设置或检索是否允许用户选中文本。语法 user-select：none | text | all | element。默

迷南。/ 2023年06月04日 04:49/ 0 赞/ 6 阅读

相关【css】控制用户能否选中文本

> `前言` 转载：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select][https_develope

深碍√TFBOYSˉ_/ 2022年12月25日 03:56/ 0 赞/ 116 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 355 阅读

相关 css3属性选择器

下面的介绍都已p元素为例来写： 1. p\[target\] 选择出有target属性的所有p元素 2. p\[target=\_blank\] 选择出 targ

左手的ㄟ右手/ 2022年11月15日 11:25/ 0 赞/ 240 阅读

相关前端笔记（3）css，选择器，文字文本属性，外观属性

CSS样式表（1）（1）css概念引入css的三种方法行内式（内联样式）内部样式表（内嵌样式表）

╰半夏微凉°/ 2022年10月23日 08:28/ 0 赞/ 204 阅读

相关 css3属性选择器

1.css3属性选择器 E\[attr^=’val’\] 属性attr的值为以‘val’开头的元素 E\[attr$=’val’\]属性attr的值为以 ‘val’结尾

Dear 丶/ 2022年07月27日 10:50/ 0 赞/ 285 阅读

相关 CSS3 选择器——属性选择器

上一切在《[CSS3选择器——基本选择器][CSS3]》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CS

淡淡的烟草味﹌/ 2022年06月10日 05:24/ 0 赞/ 411 阅读

相关 CSS3的字体和文本相关属性

CSS3其中一个重要变化就是增加了服务器字体功能，这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题。通过CSS3的服务器字体功能，可以控制浏览器使用服务器包含的字体，

旧城等待，/ 2022年05月03日 14:26/ 0 赞/ 305 阅读