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框將不會影響到滑鼠的取詞和選中文本，同時，此輸入框將呈現為禁用狀態。