使用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 class="maroon">...文字內容。</p>

會得到類似的效果：

同樣的，你可以根據自己的需要，指定CSS選取器以及對應內容文字/圖片等的選中樣式，這裡就不一一舉例了。

相容性(補充於2016-01-04)
IE9+瀏覽器都支援::selection, 考慮到現在IE8及其以下瀏覽器的份額越來越小，此屬性應該被更多人熟知和使用。

三、執行個體頁面

您可以狠狠地點擊這裡：CSS3改變文本選中預設樣式demo

四、結語

老實講，在實際的商業項目中，我是絕不會使用:selection來改變文本選中的樣式的，要是個人網站或是設計類網站倒是很有可能使用此屬性來讓網站蓬蓽生輝。當然，每個人在頁面重構的過程中所注重的地方時不一樣的，所以，對:selection的態度僅代表個人觀點。

本文其實沒有什麼內容，小技巧展示而已。如果文中有什麼表述不準確的地方歡迎指正，也歡迎通過評論進行交流。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1147

使用CSS3改變文本選中的預設顏色——張鑫旭