欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3的::selection改變選中文本顏色的方法

鑫空間   發(fā)布時間：2015-09-29 11:01:13   作者：張鑫旭   我要評論
這篇文章主要介紹了使用CSS3的::selection改變選中文本顏色的方法,也就是說可以將默認的藍色底色改為其他顏色,really cool,需要的朋友可以參考下

瀏覽器上頁面文字選中后默認的背景色是一種藍色， 不同瀏覽器的顏色有些許差異，但大致相同，文字顏色也近乎白色，如下圖所示，截自Firefox3.6瀏覽器：

在CSS3的爸爸媽媽還沒有相親認識的時候，要改變頁面上文字選中后的背景色以及文字顏色，就跟讓太監(jiān)生孩子一樣困難。但是，隨著CSS3呱呱落地，獲得越來越多的瀏覽器認可，一切又顯得那么自然而然。雖然有些頑固的糟老頭（如IE瀏覽器）還不認可這個新生的CSS3，但是，絲毫不影響其在其他瀏覽器上對UI的又一次改進。
目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性，如果瀏覽器不支持該屬性，會直接忽略它，所以不會產(chǎn)生任何不良的影響。
下面就簡單展示下這個改進UI體驗的小技巧。
改變默認選中顏色
首先，簡單點的例子，我們可以設(shè)置整個頁面文本選中的基本樣式，如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ::selection {   
  2.     background:#d3d3d3;    
  3.     color:#555;   
  4. }   
  5.   
  6. ::-moz-selection {   
  7.     background:#d3d3d3;    
  8.     color:#555;   
  9. }   
  10.   
  11. ::-webkit-selection {   
  12.     background:#d3d3d3;    
  13.     color:#555;   
  14. }  

于是，文本選中的默認藍色背景就此變成了淡灰色，如下圖所示，截自Chrome瀏覽器：

當然，我們可以使用CSS選擇器指定特定標簽內(nèi)容文字選中后的樣式狀態(tài)，例如下面所展示的栗色選中狀態(tài)：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .maroon::selection {   
  2. background:maroon;    
  3. color:#fff;   
  4. }   
  5.   
  6. .maroon::-moz-selection {   
  7. background:maroon;    
  8. color:#fff;   
  9. }   
  10.   
  11. .maroon::-webkit-selection {   
  12. background:maroon;    
  13. color:#fff;   
  14. }   
  15. <p class="maroon">...文字內(nèi)容。</p>  


會得到類似下圖的效果：

簡而言之，要改變選中文本的顏色和背景顏色，需要使用 CSS3 新增的偽 ::selection，設(shè)置顏色 color 和背景顏色 background-colcr 即可，如：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. ::selection { color:#333; background-color:#cce8cf;}   
  2. ::-moz-selection { color:#333; background-color:#cce8cf;}   
  3. ::-webkit-selection { color:#333; background-color:#cce8cf;}  


上面的代碼效果如下圖（截自 Firefox 5 瀏覽器）：

當然，你也可以結(jié)合CSS選擇器，指定標簽或區(qū)域文本選中后的樣式狀態(tài)。如：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. h2::selection { color:#f60; background-color:#cce8cf;}   
  2. p::selection { color:#333; background-color:#cce8cf;}   
  3.   
  4. h2::-moz-selection { color:#f60; background-color:#cce8cf;}   
  5. p::-moz-selection { color:#333; background-color:#cce8cf;}   
  6.   
  7. h2::-webkit-selection { color:#f60; background-color:#cce8cf;}   
  8. p::-webkit-selection { color:#333; background-color:#cce8cf;}  


大部分標簽使用 selection 沒有問題，但 a 標簽在不同的瀏覽器下有差異，有的瀏覽器 a 標簽不會應(yīng)用上 ::selection 樣式（如 FF5，Chrome12），有些瀏覽器則會應(yīng)用上 ::selection 樣式（如 Opera 11.50）。這可能是有的瀏覽器認為a比較重要，為了讓用戶知道這是鏈接，所以不改變顏色。

相關(guān)文章

最新評論