利用css3的属性来控制网页中被选中的文字颜色和背景色
时间:2015-12-6 15:40 作者:admin 分类: 代码人生
浏览器中默认的选中的文字颜色为白色,背景色为蓝色。并且在火狐和google两个不同的内核浏览器下效果也不一样,google浏览器的两段文字之间的空格也会添加上背景色,火狐的就不会,效果如下:
图一 是google浏览器下的效果截图
图二 是火狐浏览器下的效果截图
下面两图就是修改后的效果:
图一 是火狐浏览器下的效果
图二 是google浏览器下的效果
下面就来说说如何利用css3的属性来控制网页中被选中的文字颜色和背景色:
通过查阅资料得知,设置[code]body ::selection[/code]的css属性可以控制,我博客的效果设置代码如下:
[code] body ::selection {
color:#12C141;
background-color:#060606;
text-shadow:none;
}
body ::-moz-selection {
color:#12C141;
background-color:#060606;
text-shadow:none;
}
[/code]
其中的颜色和背景色可以更具自己的喜好来设置。
关于代码的几点说明:
(1)注意这里是两个冒号,不同于一般伪类的单冒号,此属性应用的css3属性;
(2)由于本站文字采用了[code]text-shadow:none;[/code]属性,而在文字选中后阴影会导致文字模糊,所以这里将阴影去掉,如果你的博客没有使用可以不用添加;
(3)ie6,7,8版本不支持此属性,ie9,10未测试;
经过测试,我的总结:
(1)IE9是支持此通过css定制选中文字的背景色的;IE7/IE8/IE9兼容性视图,都是不支持此效果的;
(2)关于选中的效果:IE9和FireFox都是存在行间距,而Chrome为整块选中状态,无行间距;
(3)上述背景色设置,使用[code]background-color[/code]或[code]background[/code],都是有效的
推荐阅读: