瀏覽器上頁面文字選中后默認的背景色是一種藍色, 不同瀏覽器的顏色有些許差異,但大致相同,文字顏色也近乎白色,如下圖所示,截自Firefox3.6瀏覽器:
在CSS3的爸爸媽媽還沒有相親認識的時候,要改變頁面上文字選中后的背景色以及文字顏色,就跟讓太監生孩子一樣困難。但是,隨著CSS3呱呱落地,獲得越來越多的瀏覽器認可,一切又顯得那么自然而然。雖然有些頑固的糟老頭(如IE瀏覽器)還不認可這個新生的CSS3,但是,絲毫不影響其在其他瀏覽器上對UI的又一次改進。
目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性,如果瀏覽器不支持該屬性,會直接忽略它,所以不會產生任何不良的影響。
下面就簡單展示下這個改進UI體驗的小技巧。
改變默認選中顏色
首先,簡單點的例子,我們可以設置整個頁面文本選中的基本樣式,如下:
于是,文本選中的默認藍色背景就此變成了淡灰色,如下圖所示,截自Chrome瀏覽器:
當然,我們可以使用CSS選擇器指定特定標簽內容文字選中后的樣式狀態,例如下面所展示的栗色選中狀態:
新聞熱點
疑難解答