如何通过CSS改变选中的文字的背景色

时间:2014-12-07 | 分类: 颩ふ随笔 | 作者:風子 | 评论: 5 次 | 点击: 1763 次

很久之前就看到过,有些网页,选中文字的时候,文字的背景色不是默认的蓝色:即:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。” def blue bkg 而是其他的颜色,比如红色。现在又看到一个例子: 选中文字的背景色是粉红色的: selection bkg pink 现在想要给wordpress中当前retina主题也添加同样的效果。   【解决过程】 1.网上搜了下,找到了:  

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

  然后把代码:
body ::selection {
    color:#FFFFFF;
    background-color:#C2300B;
    text-shadow:none;
}
拷贝到 \httpd-2.2.19-win64\httpd-2.2-x64\htdocs\wp-content\themes\retina\style.css 中去,选中文字后,效果如下: brown bkg 所以,就至少实现了IE9下面的效果了。 然后也试了试Chrome下的效果: chrome brown effect 可见,Chrome连两行之间的空格,也会添加上背景色的。 2.关于颜色,自己测试了一下,觉得这个:
body ::selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}
的效果: E84893 bkg 还不错。 3.结果试了试上述代码,在FireFox中,果然没生效,还是默认的淡蓝色背景。 所以又去添加代码:
body ::selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}
body ::-moz-selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}
然后果然有了效果了: firefox effect   【总结】 最终代码:
body ::selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}
body ::-moz-selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}
添加到对应的css配置中,即可实现选中文字的背景色。此处#E84893为类似粉红色的效果。   关于代码几点说明: (1)注意这里是两个冒号,不同于一般伪类的单冒号,此属性应用的css3属性; (2)由于本站文字采用了text-shadow属性,而在文字选中后阴影会导致文字模糊,所以这里将阴影去掉; (3)ie6,7,8版本不支持此属性,ie9,10未测试; 经过测试,我的总结: (1)IE9是支持此通过css定制选中文字的背景色的;IE7/IE8/IE9兼容性视图,都是不支持此效果的; (2)关于选中的效果:IE9和FireFox都是存在行间距,而Chrome为整块选中状态,无行间距; (3)上述背景色设置,使用background-color或background,都是有效的;

  • 发表评论
  • 查看评论:(5)
【已经有5位大神发现了看法】

沉鱼落雁随笔  2015-02-23 18:42:20 回复该评论
还挺复杂的,我不敢乱动代码
点滴生活  2015-01-26 15:09:52 回复该评论
谢谢分享,挺好的教程,学习了
琉璃瓦  2014-12-22 23:01:39 回复该评论
即:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。
香港独立IP主机  2014-12-15 15:10:43 回复该评论
站长你好,恒创科技买主机送平板,独立IP专享7折,诚邀广告位合作,博主有兴趣可加Q:2954243953
雨夜  2014-12-11 10:36:52 回复该评论
话说这个我有段时间找这个,后来我给忘了。。

发表评论:

◎欢迎参与讨论,请发表您的看法和观点。