用 selection 让“选择”五彩缤纷

日期：2011-08-17 分类：CSS

从接触网络到现在，选择的文本后的样式似乎一直都是蓝底白字，如下图（截自 Firefox 5 浏览器）：

这一成不变的颜色，有没有让你的视觉感到疲劳。你有没有想过换成自己喜欢或者其他颜色呢？也许你会问这个可能吗？之前不可能，但现在，CSS 3 让这个成为可能。

要改变选中文本的颜色和背景颜色，需要使用 CSS3 新增的伪 ::selection，设置颜色 color 和背景颜色 background-colcr 即可，如：

::selection { color:#333; background-color:#cce8cf;}
::-moz-selection { color:#333; background-color:#cce8cf;}
::-webkit-selection { color:#333; background-color:#cce8cf;}

上面的代码效果如下图（截自 Firefox 5 浏览器）：

当然，你也可以结合CSS选择器，指定标签或区域文本选中后的样式状态。如：

h2::selection { color:#f60; background-color:#cce8cf;}
p::selection { color:#333; background-color:#cce8cf;}

h2::-moz-selection { color:#f60; background-color:#cce8cf;}
p::-moz-selection { color:#333; background-color:#cce8cf;}

h2::-webkit-selection { color:#f60; background-color:#cce8cf;}
p::-webkit-selection { color:#333; background-color:#cce8cf;}

大部分标签使用 selection 没有问题，但 a 标签在不同的浏览器下有差异，有的浏览器 a 标签不会应用上 ::selection 样式（如 FF5，Chrome12），有些浏览器则会应用上 ::selection 样式（如 Opera 11.50）。这可能是有的浏览器认为a比较重要，为了让用户知道这是链接，所以不改变颜色。

查看 Demo 页面：CSS3 ::selection 属性 Demo

目前 Firefox、Safari、Chrome 以及 Opera 浏览器都支持 ::selection 属性，如果浏览器不支持该属性，则会被忽略它，不会产生任何不良的影响。

参与测试的浏览器及支持情况

注意：图片表示支持，表示不支持，表示部分支持或需要加前缀。

如果你想让自己的页面更有特色、个性，不妨加上 CSS 3 ::selection 属性，设置自己喜欢的颜色，让“选择”五彩缤纷。

查看：4,679 评论：9 标签：CSS3