使用css3 ::selection改变选中文本的颜色

一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用css3实现改变默认文本选中的颜色。
以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色。

改变默认选中颜色

首先,简单点的例子,我们可以设置整个页面文本选中的基本样式,如下:

::selection {
    background:#d3d3d3; 
    color:#555;
}

::-moz-selection {
    background:#d3d3d3; 
    color:#555;
}

::-webkit-selection {
    background:#d3d3d3; 
    color:#555;
}

当然,我们可以使用CSS选择器指定特定标签内容文字选中后的样式状态,例如下面所展示的标签

.maroon::selection {
    background:maroon; 
    color:#fff;
}

.maroon::-moz-selection {
    background:maroon; 
    color:#fff;
}

.maroon::-webkit-selection {
    background:maroon; 
    color:#fff;
}
<p>...文字内容。</p>

同样的,你可以根据自己的需要,指定CSS选择器以及对应内容文字/图片等的选中样式,这里就不一一举例了。

原创文章:使用css3 ::selection改变选中文本的颜色 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css3-selection.html)
评论已关闭。