用户选择 | user-select (Basic User Interface) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    用户选择 | user-select (Basic User Interface) - CSS 中文开发手册

    这是一个实验技术

    在使用此产品之前,请仔细检查浏览器兼容性表。

    user-selectCSS属性控制用户是否可以选择文本。这对加载为chrome的内容没有任何影响,除了在文本框中。

    /* Keyword values */
    user-select: none;
    user-select: auto;
    user-select: text;
    user-select: contain;
    user-select: all;
    
    /* Global values */
    user-select: inherit;
    user-select: initial;
    user-select: unset;
    
    /* Mozilla-specific values */
    -moz-user-select: none;
    -moz-user-select: text;
    -moz-user-select: all;
    
    /* WebKit-specific values */
    -webkit-user-select: none;
    -webkit-user-select: text;
    -webkit-user-select: all; /* Doesn‘t work in Safari; use only
                                 "none" or "text", or else it will
                                 allow typing in the <html> container */
    
    /* Microsoft-specific values */
    -ms-user-select: none;
    -ms-user-select: text;
    -ms-user-select: element;

    注意:此属性与JavaScript 选择对象相关联。

    注意:许多浏览器仍然需要一个前缀来使用这个属性。检查下面的兼容性表。

    初始值

    auto

    适用元素

    all elements

    是否是继承属性

    no

    适用媒体

    visual

    计算值

    as specified

    Animation type

    discrete

    正规顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    none元素及其子元素的文本是不可选的。请注意,Selection对象可以包含这些元素。从Firefox 21开始,none其行为如此-moz-none,因此可以在使用的子元素上重新启用选择-moz-user-select: text。auto如果浏览器的默认属性允许,可以选择文本。text文本可以由用户选择。-moz-none元素和子元素的文本将显示为不能被选中。请注意,Selection对象可以包含这些元素。可以使用子元素重新启用选择-moz-user-select: text。从Firefox 21开始,none就像-moz-none。all在HTML编辑器中,如果在子元素中出现双击或上下文单击,则将选择具有此值的最高祖先。contain

    element(特定于IE的别名)使选择在元素内开始; 然而,选择将被包含在该元素的范围内。仅在Internet Explorer中支持使用。

    注:浏览器实现之间的区别之一是继承。在Firefox中,-moz-user-select不是由绝对定位的元素继承的,而是在Safari和Chrome中,-webkit-user-select是由这些元素继承的。

    注意: CSS UI 4 重命名用户选择:要包含的元素。

    auto | text | none | contain | all

    示例

    HTML

    <p>You should be able to select this text.</p>
    <p class="unselectable">Hey, you can‘t select this text!</p>

    CSS

    .unselectable {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    结果

    规范

    Specification

    Status

    Comment

    CSS Basic User Interface Module Level 4The definition of ‘user-select‘ in that specification.

    Working Draft

    Initial definition. Also defines -webkit-user-select as a deprecated alias of user-select.

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    6.0-webkit- 54.0

    (Yes)-ms-webkit

    (Yes)-moz1

    10-ms

    15.0-webkit

    3.1-webkit

    element

    No support

    (Yes)

    No support

    (Yes)

    ?

    No support

    contain

    No support3

    ?

    No support

    ?

    No support3

    No support

    Feature

    Android

    Android Webview

    Edge

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Chrome for Android

    Basic support

    2.1

    54.0

    (Yes)-ms-webkit

    ?

    10-ms 11-webkit2

    No support

    3.2(Yes)

    54.0

    element

    ?

    No support

    (Yes)

    ?

    ?

    ?

    No support

    No support

    contain

    No support3

    No support3

    ?

    No support

    ?

    ?

    No support

    No support3

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32137.html

    用户选择 | user-select (Basic User Interface) - CSS 中文开发手册 - Break易站

    上一篇:spring data jpa 动态查询(mysql)


    下一篇:滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册 - Break易站