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

龙哥
龙哥
龙哥
1123
文章
35
评论
2014年12月7日17:11:50 5 510 1200字阅读4分0秒

很久之前就看到过,有些网页,选中文字的时候,文字的背景色不是默认的蓝色:即:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。”
如何通过CSS改变选中的文字的背景色
而是其他的颜色,比如红色。现在又看到一个例子:
选中文字的背景色是粉红色的:
如何通过CSS改变选中的文字的背景色
现在想要给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

中去,选中文字后,效果如下:

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

所以,就至少实现了IE9下面的效果了。

然后也试了试Chrome下的效果:

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

可见,Chrome连两行之间的空格,也会添加上背景色的。

2.关于颜色,自己测试了一下,觉得这个:

body ::selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}

的效果:

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

还不错。

3.结果试了试上述代码,在FireFox中,果然没生效,还是默认的淡蓝色背景。

所以又去添加代码:

body ::selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}
body ::-moz-selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}

然后果然有了效果了:

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

 

【总结】

最终代码:

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   其中:访客  0   博主  0
    • 沉鱼落雁随笔 沉鱼落雁随笔 1

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

      • 点滴生活 点滴生活 0

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

        • 琉璃瓦 琉璃瓦 1

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

          • 香港独立IP主机 香港独立IP主机 0

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

            • 雨夜 雨夜 0

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