【CSS】设置选中文字的颜色和背景色

在网页上选中一段文字，选中的文字默认情况下是以蓝色背景+ 白色文字来显示的。看过一些网站，修改了选中文字的背景色，感觉十分清新，今天来查了一下怎么实现的。

上DEMO：

[runcode height="280"]




文本选中样式

可以给用户选中的文本定义 字体颜色 color 和 背景颜色 background 。

不支持IE浏览器，支持Firefox、Opera、Chrome、Sarari。

选择本页中的文字查看效果，如果浏览器支持的话会看到这样的效果

测试使用的样式表：

::selection {
    background:#cc00cc;
    color:#fff;
}

::-moz-selection{
    background:#cc00cc;
    color:#fff;
}

code::selection {
    background: #666666;
}

code::-moz-selection {
    background: #666666;
}

Firefox浏览器使用 ::-moz-selection 选择符，其他浏览器皆采用 ::selection 选择符，文本选中样式只支持 color 和 background 属性

芸路拾光

[/runcode]

相关CSS样式如下：

::selection {
 background:#cc00cc;
 color:#fff;
}
::-moz-selection{
 background:#cc00cc;
 color:#fff;
}
code::selection {
 background: #666666;
}
code::-moz-selection {
 background: #666666;
}

做几点说明：

1. Firefox使用::-moz-selection私有选择符来实现，不支持::selection选择符
2. Chrome、Safari、Opera均使用::selection选择符
3. IE系列不支持选中文本样式
4. 选中文本样式只支持文本颜色color和背景颜色background属性

选中文字样式DEMO在Firfox 3.5、Opera 9.64、Chrome 3、Safari 4上测试有效，IE下无效。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自 芸路拾光， 原文地址《【CSS】设置选中文字的颜色和背景色》
标签： CSS
分享：