CSS 改變選取文字的顏色(CSS3 – 目前 Firefox/Safari only)

CSS 改變選取文字的顏色(CSS3 - 目前 Firefox/Safari only)
無疑在這個技術迅猛發展的現在,css2 已經顯得何其單薄,css3 草案出來後,無疑將為 web 設計帶來更多新奇的效果。選取文字顏色的改變就是 css3 中的一項規範。雖然出來得比較早了,但是鑒於還有很多人不知曉,所以我寫出來分享給大家。

語法:
::selection {background: #ffb7b7; /* Safari */}
::-moz-selection {background: #ffb7b7; /* Firefox */}

考慮到未來的瀏覽器可能會支援此屬性,所以你也可以再加上這麼一條
selection {background: #ffb7b7; }

Example:
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}

這個 css3 規範還可以這樣玩(將圖片隱藏在 html 中): Text + Image + CSS3 = Crazy Delicious (此網站和上述語法在 IE 中無法顯示效果)

View Demo Highlight Colors


以上範例轉載自: Tsung’s Blog and Overriding The Default Text Selection Color With CSS.

16 Responses to CSS 改變選取文字的顏色(CSS3 – 目前 Firefox/Safari only)

  1. 任平生 says:

    哈哈,Hide an image in html 那個挺有意思的。
    IE 什麼時候才能跟上標準的步伐唉。。。

  2. sofish says:

    😉 hoho… 飄過。

  3. fisio says:

    的確,可以不用用戶瀏覽器的默認設置了

  4. xiaorsz says:

    這東東不錯,頂一下!!

  5. eddie says:

    呵呵之前看CSS-Tricks的時候發現他的就是橙色,就去看了他的代碼
    那個Hide an image in html挺好玩的

  6. dadad says:

    selection 是什麼意思啊

  7. welee says:

    CSS3 確實很強大,更重要的它方便了網頁設計者,希望能夠早點普及!!

  8. Rui says:

    我是特地來學習的 🙄

  9. Showfom says:

    太棒了!已經加上效果

  10. Charles says:

    呵呵,效果很不錯,在enhanced spring裡面看到過,但是一直都不知道咋弄的,也懶得研究。

  11. 吖Bee says:

    IE不支持~好像蠻爽的樣子….

  12. Adam says:

    Demo 里的淡黃笑話 – 不錯 😳

  13. Donald says:

    我也想要上面那幾個笑話的完整版…嗯… 😳

  14. Leeiio says:

    @Adam
    不是極品我不好貼出來哈~
    @Donald
    自己google去…

  15. 球犯 says:

    終於找到這篇了,只是忘了文章標題。。 😳 如果是chrome瀏覽器要怎麼添加呢?

  16. 球犯 says:

    噢~好像可以啦 剛剛沒有清空緩存。。。 😳

Leave a Reply

Your email address will not be published. Required fields are marked *