龙哥 (Long.Ge)

很久之前就看到过，有些网页，选中文字的时候，文字的背景色不是默认的蓝色：即：“浏览器中默认的选中的文字颜色为白色，背景色为蓝色。”
而是其他的颜色，比如红色。现在又看到一个例子：
选中文字的背景色是粉红色的：
现在想要给wordpress中当前retina主题也添加同样的效果。

【解决过程】

1.网上搜了下，找到了：

 

css3应用之自定义选中文字的背景颜色

 

然后把代码：

body ::selection {
    color:#FFFFFF;
    background-color:#C2300B;
    text-shadow:none;
}

拷贝到

\httpd-2.2.19-win64\httpd-2.2-x64\htdocs\wp-content\themes\retina\style.css

中去，选中文字后，效果如下：

所以，就至少实现了IE9下面的效果了。

然后也试了试Chrome下的效果：
可见，Chrome连两行之间的空格，也会添加上背景色的。

2.关于颜色，自己测试了一下，觉得这个：

body ::selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}

的效果：

还不错。

3.结果试了试上述代码，在FireFox中，果然没生效，还是默认的淡蓝色背景。

所以又去添加代码：

body ::selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}
body ::-moz-selection {
    color:#FFFFFF;
    background:#E84893;
    text-shadow:none;
}

然后果然有了效果了：

 

【总结】

最终代码：

body ::selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}
body ::-moz-selection {
    color:#FFFFFF;
    background-color:#E84893;
    text-shadow:none;
}

添加到对应的css配置中，即可实现选中文字的背景色。此处#E84893为类似粉红色的效果。

 

关于代码几点说明：

（1）注意这里是两个冒号，不同于一般伪类的单冒号，此属性应用的css3属性；

（2）由于本站文字采用了text-shadow属性，而在文字选中后阴影会导致文字模糊，所以这里将阴影去掉；

（3）ie6,7,8版本不支持此属性，ie9,10未测试；

经过测试，我的总结：

（1）IE9是支持此通过css定制选中文字的背景色的；IE7/IE8/IE9兼容性视图，都是不支持此效果的；

（2）关于选中的效果：IE9和FireFox都是存在行间距，而Chrome为整块选中状态，无行间距；

（3）上述背景色设置，使用background-color或background，都是有效的；

---

关键词: css 背景色

时间：2014年12 月7日，星期日，下午5:11。
通过 RSS 2.0 订阅源关注。