如何設定CSS網頁反白效果::selection

5 月 29, 2018 | | 0 comments

CSS ::selection

網站當滑鼠反白時,反白區域的底色通常是藍色,但其實可以透過CSS ::selection選擇元素做背景色和字體顏色樣式的修改,設計此元素非常適合將用戶選擇的文本與您的網站配色方案進行匹配。

p::-moz-selection { 
    color: red;
}
p::selection { 
    color: red; 
}

如上所示,您可以::selection對單個元素進行樣式設置。
IE9+、Opera、Google Chrome 以及Safari 中支持::selection 選擇器。
Firefox 支持替代的::-moz-selection。

定義和用法

::selection 選擇器匹配被用戶選取的選取是部分。

允許的屬性

::selection在其選擇器中,只有一小部分CSS屬性可用於規則中:

  • color
  • background-color
  • cursor
  • caret-color
  • outline 和它的長處
  • text-decoration 及其相關屬性
  • text-emphasis-color
  • text-shadow

Demo