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

2014年12月7日 | 分类:龙哥随笔 | 5 条评论 » | 阅读:2,213次

很久之前就看到过,有些网页,选中文字的时候,文字的背景色不是默认的蓝色:即:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。”
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,都是有效的;

关键词: ,

“如何通过CSS改变选中的文字的背景色”有5 条评论

  1. 还挺复杂的,我不敢乱动代码

  2. 点滴生活说道:

    谢谢分享,挺好的教程,学习了

  3. 琉璃瓦说道:

    即:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。

  4. 站长你好,恒创科技买主机送平板,独立IP专享7折,诚邀广告位合作,博主有兴趣可加Q:2954243953

  5. 雨夜说道:

    话说这个我有段时间找这个,后来我给忘了。。

提交评论