User-select详解：控制文字选中

一、user-select怎么样

user-select属性控制是否允许用户选择文本，以及如何选择文本。该属性在CSS3中出现。

如果user-select的值被设置为none，则所有子元素都无法选中文本。而如果值设置为auto，则子元素将跟随父元素的规则。

对于需要禁止用户选中的元素，如代码框或工具提示，可以使用user-select:none（注意，这可能仅适用于WebKit浏览器）。

二、user-select的默认行为

默认情况下，user-select是对文本上的鼠标光标进行的选择。

下面的代码段演示了如何使用CSS3 user-select属性 来控制文字的选中:

    
    * {
        user-select: none;
    }
    

三、user-select的skip属性

skip属性指定哪些元素不应影响或限制其父级及其祖先元素的user-select属性。其可选值为none和all。

例如，当某一行包含一些文本和一个字体图标时，我们不希望用户在文本和图标之间选择：

    
    .no-user-select, .no-user-select * {
        -webkit-user-select: none; /* Chrome all / Safari all */
        -moz-user-select: none;
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Likely future */ 
    }
    

四、user-select的selected属性

selected属性允许用户选中文本，但文字看起来不同。我们可以使用JavaScript和CSS组合来显示放缩的文本，例如放大的文本，而不是选择内容。下面是一段CSS代码，使用了user-select来隐藏一部分内联CSS，以使放大的文本仍然可见：

  
    #custom-selection {
      /* Define an invisible character */
      font-size: 16px;
      color: rgba(0, 0, 0, 0);
      user-select: none;
      display: inline-block;
      width: 0;
      height: 2em;
    }

    #custom-selection::before {
      /* Display a "normal" character */
      content: '\221A';
      font-size: 32px;
      color: black;
      display: inline-block;
      margin-right: 10px;
      /* No user selection here */
      user-select:none;
    }

    #custom-selection::after {
      /* Display your magnified text here */
      content: 'This text is awesome';
      color: red;
      display: inline-block;
      /* Your style rules here */
      font-size: 48px;
      font-weight: bold;
      background-color: yellow;
      /* No user selection here */
      user-select:none;
    }
  

五、user-select为none的input框不对选取

当设置input元素的user-select为none时，文字不会被选择，但使用鼠标拖动仍然可以滚动文本。此时需要通过CSS将文本框禁用掉：

  
    input[type="text"] {
      pointer-events: none;
      user-select: none;
      opacity: .5;
    }
  

此时，input框将不会影响到鼠标的取词和选中文本，同时，此输入框将呈现为禁用状态。