用户选取 ( 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 的选取效果。

意见反馈