页面装载中...

CSS 技巧:设置选中文字的颜色和背景色

在网页上选中一段文字,默认的呈现总是深蓝色背景 + 白色文字。个性,个性哪儿去了?如果你也想换成下面这样,或换得比它们更漂亮,请继续往下看。

的:
CSS Selection Example
aw 的:
CSS Selection Example

说白了,我们只用到 CSS 的一个关键字:selection,通过它,可以为被选中文字设置任意的颜色和背景色,用法:

::-moz-selection{
    background:#6374AB;
    color:#fff;
}
::selection {
    background:#6374AB;
    color:#fff;
}
code::-moz-selection {
    background: #333333;
}
code::selection {
    background: #333333;
}

按照这里的说法,在 Mozilla 浏览器下(包括 Firefox)写为 ::-moz-selection 才有效,Safari 下只要 ::selection 就够了。——本人在 Firefox 下测试 ::selection 果然不起作用,Safari 没有测试(没条件)。

code::[-moz-]selection 可以为使用了 <code> 标签的代码文字设置颜色和背景色,在本文中选择一段文字看看就知道效果了。 :lol:

update: 哦,忘了说 IE 了,IE 对这个关键字是不支持的,包括最新版的 IE7,IE8 支不支持就不清楚了。

你可能会有兴趣继续阅读

16排都被占了... 抢座 或 Trackback

我要占座!

Connecting to server...