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

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

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

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

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

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. }  

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

當(dāng)然，我們可以使用CSS選擇器指定特定標(biāo)簽內(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>  


會(huì)得到類似下圖的效果：

簡(jiǎn)而言之，要改變選中文本的顏色和背景顏色，需要使用 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 瀏覽器）：

當(dāng)然，你也可以結(jié)合CSS選擇器，指定標(biāo)簽或區(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;}  


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

相關(guān)文章

最新評(píng)論