CSS3實現改變默認文本選中的顏色

2020-03-24 16:21:50

字體：大中小

來源：轉載

供稿：網友

一般情況下在網頁里的文本我們用鼠標選中的時候都是藍色的，這個默認顏色也是可以更改的，本文我們學習如何使用CSS3實現改變默認文本選中的顏色? 關于瀏覽器文字選中顏色以我的系統舉例（xp 默認主題），瀏覽器上頁面文字選中后默認的背景色是一種藍色，不同瀏覽器的顏色有些許差異，但大致相同，文字顏色也近乎白色，如下圖所示，截自Firefox3.6瀏覽器：
在CSS3的爸爸媽媽還沒有相親認識的時候，要改變頁面上文字選中后的背景色以及文字顏色，就跟讓太監生孩子一樣困難。但是，隨著CSS3呱呱落地，獲得越來越多的瀏覽器認可，一切又顯得那么自然而然。雖然有些頑固的糟老頭（如IE瀏覽器）還不認可這個新生的CSS3，但是，絲毫不影響其在其他瀏覽器上對UI的又一次改進。目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性，如果瀏覽器不支持該屬性，會直接忽略它，所以不會產生任何不良的影響。下面就簡單展示下這個改進UI體驗的小技巧。二、改變默認選中顏色首先，簡單點的例子，我們可以設置整個頁面文本選中的基本樣式，如下：::selection { background:#d3d3d3; color:#555;::-moz-selection { background:#d3d3d3; color:#555;::-webkit-selection { background:#d3d3d3; color:#555;于是，文本選中的默認藍色背景就此變成了淡灰色，如下圖所示，截自Chrome瀏覽器：
當然，我們可以使用CSS選擇器指定特定標簽內容文字選中后的樣式狀態，例如下面所展示的栗色選中狀態：.maroon::selection { background:maroon; color:#fff;.maroon::-moz-selection { background:maroon; color:#fff;.maroon::-webkit-selection { background:maroon; color:#fff; p ...文字內容。 /p 會得到類似下圖的效果：
同樣的，你可以根據自己的需要，指定CSS選擇器以及對應內容文字/圖片等的選中樣式，這里就不一一舉例了。本文只是一個技術交流，實際工作中是否使用還得看具體情況，在商業網站中我是絕不會使用:selection來改變文本選中的樣式的，要是個人網站或是設計類網站倒是很有可能使用此屬性來讓網站蓬蓽生輝。當然，每個人在頁面重構的過程中所注重的地方時不一樣的，所以，對:selection的態度僅代表個人觀點html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5 CSS3實現一個精美VCD包裝盒個性幻燈片案例

下一篇：CSS3之新增選擇器的詳細介紹