很久之前就看到过,有些网页,选中文字的时候,文字的背景色不是默认的蓝色:即:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。”
而是其他的颜色,比如红色。现在又看到一个例子:
选中文字的背景色是粉红色的:
现在想要给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
中去,选中文字后,效果如下:
所以,就至少实现了IE9下面的效果了。
然后也试了试Chrome下的效果:
可见,Chrome连两行之间的空格,也会添加上背景色的。
2.关于颜色,自己测试了一下,觉得这个:
body ::selection { color:#FFFFFF; background:#E84893; text-shadow:none; }
的效果:
还不错。
3.结果试了试上述代码,在FireFox中,果然没生效,还是默认的淡蓝色背景。
所以又去添加代码:
body ::selection { color:#FFFFFF; background:#E84893; text-shadow:none; } body ::-moz-selection { color:#FFFFFF; background:#E84893; text-shadow:none; }
然后果然有了效果了:
【总结】
最终代码:
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,都是有效的;
还挺复杂的,我不敢乱动代码
谢谢分享,挺好的教程,学习了
即:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。
站长你好,恒创科技买主机送平板,独立IP专享7折,诚邀广告位合作,博主有兴趣可加Q:2954243953
话说这个我有段时间找这个,后来我给忘了。。