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

2022-07-25 09:36:09 字數 1335 閱讀 8999

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

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

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

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

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

::selection 

::-moz-selection

::-webkit-selection

於是,文字選中的預設藍色背景就此變成了淡灰色,如下圖所示,截自chrome瀏覽器:

當然,我們可以使用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的爸爸媽媽還沒有相親認識的時候,要改變頁面上文字選中後的背景色以及文字顏色,就跟讓太監生孩子一樣困難。但是,...