by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=1147

?

關(guān)于瀏覽器文字選中顏色

以我的系統(tǒng)舉例（xp 默認(rèn)主題），瀏覽器上頁面文字選中后默認(rèn)的背景色是一種藍(lán)色， 不同瀏覽器的顏色有些許差異，但大致相同，文字顏色也近乎白色，如下圖所示，截自Firefox3.6瀏覽器：

在 CSS3的爸爸媽媽還沒有相親認(rèn)識的時(shí)候，要改變頁面上文字選中后的背景色以及文字顏色，就跟讓太監(jiān)生孩子一樣困難。但是，隨著CSS3呱呱落 地，獲得越來越多的瀏覽器認(rèn)可，一切又顯得那么自然而然。雖然有些頑固的糟老頭（如IE瀏覽器）還不認(rèn)可這個(gè)新生的CSS3，但是，絲毫不影響其在其他瀏 覽器上對UI的又一次改進(jìn)。

目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性，如果瀏覽器不支持該屬性，會直接忽略它，所以不會產(chǎn)生任何不良的影響。

?

下面就簡單展示下這個(gè)改進(jìn)UI體驗(yàn)的小技巧。

?

二、改變默認(rèn)選中顏色

首先，簡單點(diǎn)的例子，我們可以設(shè)置整個(gè)頁面文本選中的基本樣式，如下：

      ::selection {
    background:#d3d3d3; 
    color:#555;
}

::-moz-selection {
    background:#d3d3d3; 
    color:#555;
}

::-webkit-selection {
    background:#d3d3d3; 
    color:#555;
}
    

?

于是，文本選中的默認(rèn)藍(lán)色背景就此變成了淡灰色，如下圖所示，截自Chrome瀏覽器：

當(dāng)然，我們可以使用CSS選擇器指定特定標(biāo)簽內(nèi)容文字選中后的樣式狀態(tài)，例如下面所展示的栗色選中狀態(tài)：

      .maroon::selection {
    background:maroon; 
    color:#fff;
}

.maroon::-moz-selection {
    background:maroon; 
    color:#fff;
}

.maroon::-webkit-selection {
    background:maroon; 
    color:#fff;
}

<p class="maroon">...文字內(nèi)容。</p>
    

?

會得到類似下圖的效果：

同樣的，你可以根據(jù)自己的需要，指定CSS選擇器以及對應(yīng)內(nèi)容文字/圖片等的選中樣式，這里就不一一舉例了。

?

三、實(shí)例頁面

您可以狠狠地點(diǎn)擊這里： CSS3改變文本選中默認(rèn)樣式demo

?

四、結(jié)語

老實(shí)講，在實(shí)際的商業(yè)項(xiàng)目中，我是絕不會使用:selection來改變文本選中的樣式的，要是個(gè)人網(wǎng)站或是設(shè)計(jì)類網(wǎng)站倒是很有可能使用此屬性來讓網(wǎng)站蓬蓽生輝。當(dāng)然，每個(gè)人在頁面重構(gòu)的過程中所注重的地方時(shí)不一樣的，所以，對:selection的態(tài)度僅代表個(gè)人觀點(diǎn)。

?

?

原文： http://www.zhangxinxu.com/wordpress/2010/10/%E4%BD%BF%E7%94%A8css3%E6%94%B9%E5%8F%98%E6%96%87%E6%9C%AC%E9%80%89%E4%B8%AD%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%9C%E8%89%B2/

?

本文其實(shí)沒有什么內(nèi)容，小技巧展示而已。如果文中有什么表述不準(zhǔn)確的地方歡迎指正，也歡迎通過評論進(jìn)行交流。

?

原創(chuàng)文章，轉(zhuǎn)載請注明來自 張鑫旭-鑫空間-鑫生活 [ http://www.zhangxinxu.com ]
本文地址： http://www.zhangxinxu.com/wordpress/?p=1147

（本篇完）