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.

  • http://rpsh.net/ 任平生

    哈哈,Hide an image in html 那个挺有意思的。
    IE 什么时候才能跟上标准的步伐唉。。。

  • http://www.happinesz.cn/ sofish

    :wink: hoho… 飘过。

  • http://fisio.cn/ fisio

    的确,可以不用用户浏览器的默认设置了

  • http://www.xiaorsz.com xiaorsz

    这东东不错,顶一下!!

  • http://www.ediyang.com eddie

    呵呵之前看CSS-Tricks的时候发现他的就是橙色,就去看了他的代码
    那个Hide an image in html挺好玩的

  • http://dww.fgfgf dadad

    selection 是什么意思啊

  • http://welee.org welee

    CSS3 确实很强大,更重要的它方便了网页设计者,希望能够早点普及!!

  • http://zrfree.com/ Rui

    我是特地来学习的 :roll:

  • http://showfom.com/ Showfom

    太棒了!已经加上效果

  • http://sexywp.com Charles

    呵呵,效果很不错,在enhanced spring里面看到过,但是一直都不知道咋弄的,也懒得研究。

  • http://www.iqbee.cn 吖Bee

    IE不支持~好像蛮爽的样子….

  • http://www.61dh.com/blog Adam

    Demo 里的淡黄笑话 – 不错 :oops:

  • http://zuoshen.com Donald

    我也想要上面那几个笑话的完整版…嗯… :oops:

  • http://leeiio.me/ Leeiio

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

  • 球犯

    终于找到这篇了,只是忘了文章标题。。 :oops: 如果是chrome浏览器要怎么添加呢?

  • 球犯

    噢~好像可以啦 刚刚没有清空缓存。。。 :oops: