CSS3實現改變預設文本選中的顏色

來源:互聯網
上載者:User

這個預設顏色也是可以更改的,本文我們學習如何使用CSS3實現改變預設文本選中的顏色?
關於瀏覽器文字選中顏色
以我的系統舉例(xp 預設主題),瀏覽器上頁面文字選中後預設的背景色是一種藍色, 不同瀏覽器的顏色有些許差異,但大致相同,文字顏色也近乎白色,如下圖所示,截自Firefox3.6瀏覽器:

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

目前Firefox、Safari、Chrome以及Opera瀏覽器都支援文本選擇屬性,如果瀏覽器不支援該屬性,會直接忽略它,所以不會產生任何不良的影響。

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

二、改變預設選中顏色
首先,簡單點的例子,我們可以設置整個頁面文本選中的基本樣式,如下:

::selection {
background:#d3d3d3;
color:#555;
}

::-moz-selection {
background:#d3d3d3;
color:#555;
}

::-webkit-selection {
background:#d3d3d3;
color:#555;
}
於是,文本選中的預設藍色背景就此變成了淡灰色,如下圖所示,截自Chrome瀏覽器:

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

.maroon::selection {
background:maroon;
color:#fff;
}

.maroon::-moz-selection {
background:maroon;
color:#fff;
}

.maroon::-webkit-selection {
background:maroon;
color:#fff;
}
<p class="maroon">... 文字內容。 </p>
會得到類似下圖的效果:

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

三、結語
本文只是一個技術交流,實際工作中是否使用還得看具體情況,在商業網站中我是絕不會使用:selection來改變文本選中的樣式的,要是個人網站或是設計類網站倒是很有可能使用此屬性來讓網站蓬蓽生輝。 當然,每個人在頁面重構的過程中所注重的地方時不一樣的,所以,對:selection的態度僅代表個人觀點。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.