用CSS改变选择文本的背景颜色

我经常浏览国外一些大牛的网站,每当我用鼠标选择网页上的文本时,文字的背景色不是默认的深蓝色,而是,他们改变成了与自己网站相协调的背景色。这一个小的技巧非常有用,我到网上搜寻一些关于改变 “ 选择文本的背景颜色 ” 的解决方案。

这么酷的方法,只有CSS3的 UI元素状态伪类 E::selection 选择器才能实现此功能,::selection 它可以选择任何您想要的颜色 ,与您的网站文字匹配协调的高亮颜色。使用鼠标按下不放选择文字的时候可以看到。

目前,只有 Safari 和 Firefox 支持此CSS3属性,不过语法上还有些稍微的区别。

在主流的浏览器中使用感觉非常好,但是,却得到了其他浏览器的支持,非常遗憾。不过丝毫没有改变我们的使用热情,这可能看起来没有什么,但它是一个微妙的效果,可以为您的网站增加一些视觉吸引力!

The CSS3 Code :

1
2
3
4
5
6
::selection {
	background: #ffb7b7; /* Safari */
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}

 

View Demo »

 

不同的段落选择颜色:

p.red::selection {
	background: #ffb7b7;
}
p.red::-moz-selection {
	background: #ffb7b7;
}
p.blue::selection {
	background: #a8d1ff;
}
p.blue::-moz-selection {
	background: #a8d1ff;
}
p.yellow::selection {
	background: #fff2a8;
}
p.yellow::-moz-selection {
	background: #fff2a8;
}

站点统计