CSS 技巧:设置选中文字的颜色和背景色
在网页上选中一段文字,默认的呈现总是深蓝色背景 + 白色文字。个性,个性哪儿去了?如果你也想换成下面这样,或换得比它们更漂亮,请继续往下看。
说白了,我们只用到 CSS 的一个关键字:selection,通过它,可以为被选中文字设置任意的颜色和背景色,用法:
::-moz-selection{
background:#6374AB;
color:#fff;
}
::selection {
background:#6374AB;
color:#fff;
}
code::-moz-selection {
background: #333333;
}
code::selection {
background: #333333;
}
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> 标签的代码文字设置颜色和背景色,在本文中选择一段文字看看就知道效果了。
update: 哦,忘了说 IE 了,IE 对这个关键字是不支持的,包括最新版的 IE7,IE8 支不支持就不清楚了。


aw 2008年01月08日 14:29 ₪
你这个也太蓝了……
aw’s last blog post..只堵不疏 - 有感于“很黄很暴力”现象
北极冰仔 2008年01月08日 14:37 ₪
你那个很黄,哈哈,开个玩笑。
Player 2008年01月08日 19:54 ₪
很有用,::这玩意还是第一次在CSS里见到啊,看来我还是菜鸟啊~~
Player’s last blog post..最终幻想9汉化补丁发布
北极冰仔 2008年01月08日 20:00 ₪
其实我也是头一回啊 ^_^
乌拉诺斯 2008年01月08日 21:52 ₪
呵呵…黄+蓝…绿?
冰仔,你这个评论显示评论者最近文章的插件挺有意思的…
乌拉诺斯’s last blog post..“Today In History”的想法
乌拉诺斯 2008年01月08日 21:52 ₪
imgCode有bug…
乌拉诺斯’s last blog post..“Today In History”的想法
yichi 2008年01月09日 00:40 ₪
这个我喜欢,呵呵,也是第一回知道^^
yichi’s last blog post..PDP Panel Icon
Jinwen 2008年01月09日 07:06 ₪
IE总是要特别照顾,唉~
Jinwen’s last blog post..抛开统计,享受WordPress
北极冰仔 2008年01月09日 12:02 ₪
Jinwen » 这次照顾不到 IE 了,呵呵。
北极冰仔 2008年01月09日 12:03 ₪
乌拉诺斯 » 这个插件是 commentluv,你可以找一下。另外你说的 imgCode 有 bug 是指什么?
C.J. 2008年01月10日 01:57 ₪
过来复习一下,哈哈
C.J.’s last blog post..点击博客广告
wondger 2008年01月11日 21:11 ₪
呵呵,很女子,很弓虽大~···
fisio 2008年01月15日 00:45 ₪
冰仔你就是我的偶像…
fisio’s last blog post..新开频道:麦客
北极冰仔 2008年01月15日 08:30 ₪
老肥你真太看得起我了 - -
Player 2008年01月20日 02:59 ₪
Opera貌似不支持啊~~
Player’s last blog post..visual studio.net已检测到指定的web服务器运行的不是asp.net1.1版
ximicc 2008年04月01日 10:53 ₪
最近在学习CSS 想交换链接不知可否..