使用者選取 user-select

透過 CSS user-select 樣式屬性，可以控制使用者「是否能選取元素內容」，這篇教學會介紹 user-select 樣式屬性的用法，以及搭配虛擬元素 before、after 做出「點擊按鈕後選取內容」的 CSS 效果。

如果要修改選取的樣式，可參考：「::selection 虛擬元素選擇器」。

快速導覽：

• 認識 user-select
• 點擊虛擬元素後選取內容文本

認識 user-select

user-select 是一個設定「使用者能否選取元素內容」的樣式屬性，這個樣式雖然沒有繼承特性，但如果父元素設定了 user-select，如果子元素沒有額外設定，就會一併套用對應的選取規則。下方列出相關屬性值：

• 虛擬元素 ::before 和 ::after 屬於「選擇器」，並不是 HTML 的元素，無法選取虛擬元素的內容。
• 注意，目前仍有少部分瀏覽器不支援 user-select。

下方範例使用四個 div 呈現 user-select 的選取效果。

線上展示：https://codepen.io/oxxo/pen/RNbpPvX

<!-- HTML 程式碼 -->
<div class="a">用滑鼠選取本文，不能選取虛擬元素 ( 預設值 )</div>
<div class="b">點一下就可以選取本文所有內容，不能選取虛擬元素
  <ul>
    <li>只要點一下</li>
    <li>也會選到我</li>
  </ul>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
</div>
<div class="c">不能選取本文和虛擬元素</div>
<div class="d">只選取子元素，不能選取本文和虛擬元素
  <ul>
    <li>不會選到我</li>
    <li>不會選到我</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 300px;
  }
  img {width: 100px;}
  div::before {content: "<before> ";}
  div::after {content: " <after>";}

  .a {user-select: auto;}
  .b {user-select: all;}
  .c {user-select: none;}
  .d {user-select: none;}
  .d * {user-select: all;}
</style>

點擊虛擬元素後選取內容文本

雖然虛擬元素 ::before 和 ::after 無法選取，但卻可以和使用者的滑鼠事件互動，透過 user-select: all; 和 user-select: auto; 搭配，就能實現下方範例的「點擊按鈕後全選內容」效果。

虛擬元素無法直接使用 :hover 選擇器，必須將 :hover 放在元素本身，必須先將元素設定 pointer-events:none，再將虛擬元素設定為 pointer-events:auto，就能避免滑鼠懸停在元素上方觸發虛擬元素效果 ( 參考：滑鼠事件 pointer-events )。

線上展示：https://codepen.io/oxxo/pen/MYgpaWQ

<!-- HTML 程式碼 -->
<div><span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span></div>
  
<!-- CSS 程式碼 -->
<style>
  div {
    position: relative;
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 300px;
    pointer-events: none;    /* 父元素取消和滑鼠互動 */
    user-select: all;        /* 父元素點一下就選取全部內容，因為取消互動，所以只能點虛擬元素 */
  }
  div::before {
    position: absolute;
    content: "點我全選內容";
    left: 0;
    bottom: -50px;
    padding: 10px;
    border: 1px solid #000;
    background: #ccc;
    cursor: pointer;
    pointer-events: auto;        /* 虛擬元素可以和滑鼠互動 */
  }
  div:hover::before {background: #ddd;}
  div span {user-select: text;}  /* 子元素內容可以獨立選取 */
</style>

小結

CSS 的 user-select 是個不容易被注意到的樣式屬性，但如果有大量選擇文本，或不希望文本被選取的需求，可以透過 user-select 來實現純 CSS 的選取效果。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～