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

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

上DEMO：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>枫芸志 » 文本选中样式</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css">  </style> </head><body> <h2>文本选中样式</h2> <p>可以给用户选中的文本定义字体颜色 <code>color</code> 和背景颜色 <code>background</code> 。</p> <p>不支持IE浏览器，支持Firefox、Opera、Chrome、Sarari。</p> <p>选择本页中的文字查看效果，如果浏览器支持的话会看到<span class="selected">这样的效果</span></p> <h3>测试使用的样式表：</h3> <pre><code>::selection { background:#cc00cc; color:#fff; } ::-moz-selection{ background:#cc00cc; color:#fff; } code::selection { background: #666666; } code::-moz-selection { background: #666666; } </code></pre> <p>Firefox浏览器使用 <code>::-moz-selection</code> 选择符，其他浏览器皆采用 <code>::selection</code> 选择符，文本选中样式只支持 <code>color</code> 和 <code>background</code> 属性</p> <p><a href="http://witmax.cn">枫芸志</a></p> </body></html>

提示：你可以先修改部分代码再运行。

相关CSS样式如下：

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

做几点说明：

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

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

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

标签： CSS

枫芸志

枫芸志

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

还没有人抢沙发呢~

点击这里取消回复。