网页编程网

一、css改变文字选择时的默认背景颜色

网页上的文本选择时，一般会出现蓝色的背景，这貌似是微软默认的，如果想改变这个颜色，定义CSS：

::selection{background: #A8141B; color: white; /* Safari */} ::-moz-selection{background: #A8141B; color: white; /* Firefox */ }

注意：

这只能在Firefox和Safari中有效。

IE浏览器下似乎没有什么效果。

二、css改变默认文本选中的颜色的方法

一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的，这个默认颜色也是可以更改的，本文介绍如何使用css3实现改变默认文本选中的颜色。

以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色。

1、关于浏览器文字选中颜色：

在css3的爸爸 妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。

但是，随着css3呱呱落地，获得越来越多的浏览器认可，一切又显得那么自然而然。虽然有些顽固的糟老头（如ie浏览器）还不认可这个新生的css3，但是丝毫不影响其在其他浏览器上对ui的又一次改进。

目前firefox、safari、chrome以及opera浏览器都支持文本选择属性，如果浏览器不支持该属性，会直接忽略它，所以不会产生任何不良的影响。

下面就简单展示下这个改进ui体验的小技巧。

2、改变默认选中颜色：

设置整个页面文本选中的基本样式，如下：

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

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

3、结语：

在商业网站中不会使用:selection来改变文本选中的样式的，要是个人网站或是设计类网站倒是很有可能使用此属性来让网站蓬荜生辉。

当然，每个人在页面重构的过程中所注重的地方时不一样的，所以，对:selection的态度仅代表个人观点。

三、css3改变默认选中颜色的例子

1、改变默认选中颜色

设置整个页面文本选中的基本样式，如下：

::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 class="maroon">...文字内容。</p>