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

2021-06-22 16:27:49 字數 979 閱讀 9236

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

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

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

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

二、改變預設選中顏色

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

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

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

會得到類似下圖的效果:

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

三、結語

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

如何改變網頁選中文字的顏色

今天看了國外的很多 發現在網頁中選中文字的時候,顏色不是我們平常所說的藍色。經過google的幫助,發現,原來是 css 3.0的乙個小特性。除了主流瀏覽器 ie 之外,一般還是支援的。這是瀏覽器預設選中的顏色 作為一名範女王的偽資深粉絲,我只能說,這張的重點在於,她真的很有本事將別人原本長得好好的...

CSS3美化網頁文字

概述 1,字型樣式 網頁字型樣式包括字型型別,大小,顏色等基本效果,另外還包括一些特殊的樣式,如字型粗細,下劃線,斜體,大小等 1.1 定義字型型別 css使用font family屬性來定義字型型別,另外使用font屬性也可以定義字型型別。font family是字型專用型別專用屬性,用法如下 f...

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...