請選擇本頁面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htmCSS改變預設文本選中的顏色的方法一般情況下在網頁里的文本我們用滑鼠選中的時候都是藍色的,這個預設顏色也是可以更改的,本文我們學習如何使用CSS3實現改變預設文本選中的顏色。以我的系統舉例(xp 默...
請選擇本頁面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm
CSS改變預設文本選中的顏色的方法
一般情況下在網頁里的文本我們用滑鼠選中的時候都是藍色的,這個預設顏色也是可以更改的,本文我們學習如何使用CSS3實現改變預設文本選中的顏色。
以我的系統舉例(xp 預設主題),瀏覽器上頁面文字選中後預設的背景色是一種藍色, 不同瀏覽器的顏色有些許差異,但大致相同,文字顏色也近乎白色。
一、關於瀏覽器文字選中顏色:
在CSS3的爸爸 媽媽還沒有相親認識的時候,要改變頁面上文字選中後的背景色以及文字顏色,就跟讓太監生孩子一樣困難。但是,隨著CSS3呱呱落地,獲得越來越多的瀏覽器認可,一切又顯得那麼自然而然。雖然有些頑固的糟老頭(如IE瀏覽器)還不認可這個新生的CSS3,但是絲毫不影響其在其他瀏覽器上對UI的又一次改進。
目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性,如果瀏覽器不支持該屬性,會直接忽略它,所以不會產生任何不良的影響。下麵就簡單展示下這個改進UI體驗的小技巧。 by 何問起
二、改變預設選中顏色:
首先,簡單點的例子,我們可以設置整個頁面文本選中的基本樣式,如下:
::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}
同樣的,你可以根據自己的需要,指定CSS選擇器以及對應內容文字/圖片等的選中樣式,這裡就不一一舉例了。
三、結語:
本文只是一個技術交流,實際工作中是否使用還得看具體情況,在商業網站中我是絕不會使用:selection來改變文本選中的樣式的,要是個人網站或是設計類網站倒是很有可能使用此屬性來讓網站蓬蓽生輝。當然,每個人在頁面重構的過程中所註重的地方時不一樣的,所以,對:selection的態度僅代表個人觀點。
代碼:
<style> ::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}</style>
示例二:
<style>
::selection { background:deeppink; color:white; } ::-moz-selection { background:deeppink; color:white; } ::-webkit-selection { background:deeppink; color:white;}</style>
轉載自:http://hovertree.com/h/bjaf/38hq6y9d.htm 何問起