css3应用之自定义选中文字的背景颜色

在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理。其实这样是很符合用户体验的。因为有很多的人会用鼠标选择着一行一行的阅读。其中就包括本人。。。

浏览器中默认的选中的文字颜色为白色，背景色为蓝色。

我们如何自定义呢？

效果参见本博客，选中文字后可以见到效果。本博客中用到的代码是

body ::selection {color:#FFFFFF;text-shadow:none;}
body ::-moz-selection {color:#FFFFFF;background-color:#C2300B;text-shadow:none;}
注意这里是两个冒号，不同于一般伪类的单冒号，此属性应用的css3属性

body标签可以根据需要修改。color是选中后文字的颜色，background-color为选中文字的背景色。由于本站文字采用了text-shadow属性，而在文字选中后阴影会导致文字模糊，所以这里将阴影去掉。

ok，就这么简单。其他可以自由发挥了。。。

---

注意要点：

• ie6,7,8版本不支持此属性，ie9,10未测试。
• firefox和其他webkit浏览器，实现代码有不同（body::-moz-selection{}）
• fierfox中选中的文字存在间距，chrome中为整块选中状态，行与行之间不存在间距。