最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】通过CSS改变网页中所选中的文字的背景色为红色

CSS crifan 3418浏览 0评论

【背景】

很久之前就看到过,有些网页,选中文字的时候,文字的背景色不是默认的蓝色:

1中的解释:“浏览器中默认的选中的文字颜色为白色,背景色为蓝色。”

2:

def blue bkg

而是其他的颜色,比如红色。现在又看到一个例子:

http://www.micron.com/about/news-and-events/events/fms-2012

选中文字的背景色是粉红色的:

selection bkg pink

现在想要给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

中去,选中文字后,效果如下:

brown bkg

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

然后也试了试Chrome下的效果:

chrome brown effect

可见,Chrome连两行之间的空格,也会添加上背景色的。

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

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

的效果:

E84893 bkg

还不错。

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

所以又去添加代码:

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

然后果然有了效果了:

firefox effect

 

【总结】

最终代码:

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改变网页中所选中的文字的背景色为红色

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 请问各位这个效果在IE浏览器上有什么办法兼容没
    潇潇编程11年前 (2013-02-21)回复
85 queries in 0.183 seconds, using 22.08MB memory