欧美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:#333background-color:#cce8cf;}   
  2. ::-moz-selection { color:#333background-color:#cce8cf;}   
  3. ::-webkit-selection { color:#333background-color:#cce8cf;}  


上面的代碼效果如下圖(截自 Firefox 5 瀏覽器):

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

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