CSS - 偽元素 - ::selection

::selection 偽元素用於為文件或頁面中使用者透過互動（例如單擊並拖動滑鼠選擇文字）突出顯示的部分應用樣式。

可以使用少量 CSS 屬性與 ::selection 偽元素一起使用，如下所示

顏色屬性
background-color
文字裝飾及其相關屬性
text-shadow
webkit-text-stroke-color, -webkit-text-fill-color 和 -webkit-text-stroke-width

background-image 屬性會被忽略。

語法

selector::selection {
    /* ... */
}

可訪問性問題

不建議出於美觀原因覆蓋所選文字樣式。

如果已覆蓋文字樣式，請確保為文字應用高對比度比率，因為這將使使用者更容易閱讀。

在 Windows 高對比度模式下，如果使用者輸入的文字呈現的樣式與佔位符文字相同，則難以區分佔位符文字和輸入的文字。

佔位符不能替代 <label> 元素。輔助技術無法解析 <input> 元素。

CSS ::selection 示例

這是一個 ::selection 偽元素的示例

<html> 
<head>
<style>
   .highlight::selection { 
      color: yellow;
      background: brown;
   } 
</style>
</head>
<body>
   <p class="highlight">Select Me!!! to see the effect.</p>
   <p>No style applied to me.</p>
</body>
</html>

列印頁面