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

以我的系統舉例（xp 預設主題），瀏覽器上頁面文字選中後預設的背景色是一種藍色， 不同瀏覽器的顏色有些許差異，但大致相同，文字顏色也近乎白色，如下圖所示，截自firefox3.6瀏覽器：

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

目前firefox、safari、chrome以及opera瀏覽器都支援文字選擇屬性，如果瀏覽器不支援該屬性，會直接忽略它，所以不會產生任何不良的影響。

下面就簡單展示下這個改進ui體驗的小技巧。

首先，簡單點的例子，我們可以設定整個頁面文字選中的基本樣式，如下：

::selection 

::-moz-selection 
::-webkit-selection 

當然，我們可以使用css選擇器指定特定標籤內容文字選中後的樣式狀態，例如下面所展示的栗色選中狀態：

.maroon::selection 

.maroon::-moz-selection 
.maroon::-webkit-selection 

...文字內容。

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

相容性(補充於2016-01-04)

ie9+瀏覽器都支援::selection, 考慮到現在ie8及其以下瀏覽器的份額越來越小，此屬性應該被更多人熟知和使用。

您可以狠狠地點選這裡：css3改變文字選中預設樣式demo

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

css3 布局 文字

它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現 語法 columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。引數 引數說明 主要用來定義多列中每列的寬度 主要...

css3邊框,文字

css3邊框屬性 border radius圓角 瀏覽器 internet explorer 9 firefox chrome 以及 safari box shadow盒陰影 瀏覽器 internet explorer 9 firefox chrome 以及 safari border image邊...

CSS3控制網頁選中文字的顏色和背景

以我的系統舉例 xp 預設主題 瀏覽器上頁面文字選中後預設的背景色是一種藍色，不同瀏覽器的顏色有些許差異，但大致相同，文字顏色也近乎白色，如下圖所示，截自firefox3.6瀏覽器 在css3的爸爸媽媽還沒有相親認識的時候，要改變頁面上文字選中後的背景色以及文字顏色，就跟讓太監生孩子一樣困難。但是，...