修改网页文字选择默认的蓝色-威言威语

修改网页文字选择默认的蓝色

William2011-03-06 14:47设计9,450次阅读45条评论

前几天有个小盆友问我：威，你的博客文字选择之后怎么是紫色的，为什么我看其他的人家的网站，都是蓝色的，我很好奇。

然后我就小小的夸奖了一翻，我说你应该用的FireFox或者Chrome吧？然后小盆友回答让我吐血，FireFox和Chrome是什么？我很纠结，我说难道你用IE9？然后回答我上面没有IE…

原来此小盆友用的苹果电脑，*&%/#@!*&^!

好，言归正传，其实这个很简单就可以实现的，如果你网站是灰白色调的，选择文字是蓝色看着是不是有些别扭，如果是深灰色，是不是会舒服一些？

将下面的CSS添加到你的网站的CSS中就行了，当然颜色你就可以自定义了。

::selection {color: #fff;background-color: #639;}
::-moz-selection {color: #fff;background-color: #639;}

这样一来选择就千变万化了，感觉是不是很好？当然这个是CSS3属性，只支持IE9，FireFox，Chrome，Safari，Opera。

本文固定链接: https://www.weisay.com/blog/modify-text-blue-selection.html | 威言威语

修改网页文字选择默认的蓝色：目前有45 条评论

21楼
legend

好东东，学到啦。我也自建了一个页面用用来测试css3。http://goease.net/css3.html

2011-11-27 19:54 回复
20楼
klant

呵呵，虽然笔记本已经换成了IE9，但是宿舍台式电脑还是IE7。

2011-03-27 12:55 回复
19楼
xuan律

这个倒是可以研究下，嘎嘎…虽然俺还在用360…

2011-03-16 21:58 回复
18楼
世纪预言

我把这两段代码复制到layout.css里，只能在chrome下有效果，在IE9下没效果，不知道是怎么回事！

2011-03-13 13:04 回复
- William 文章作者
  
  不应该啊，我用IE9打开我的博客能看见是紫色的么，这个支持IE9,FireFox,Chrome，Opera，Safari。
  
  2011-03-13 14:37 回复
  - 世纪预言
    
    又测试了几遍，还是一样在chrome下有效果，IE9下没效果，我用的是IE9 RC版，还有我用的是PJBLOG程序，不知道是不是和这个有关系，我用IE9访问你的博客是有效果的！
    
    2011-03-13 23:01 回复
    - William 文章作者
      
      对啊，很奇怪哦，应该加上去就会有出效果的
      
      2011-03-15 22:36 回复
      - 世纪预言
        
        只能希望PJ4加油了，希望不会让我们这些支持者失望，早点发布公测版！
        
        2011-03-16 03:07 回复
17楼
小星

这个还真没用过，晚上回去试试！

2011-03-11 16:02 回复
- William 文章作者
  
  可以用用，效果是不错滴
  
  2011-03-11 17:08 回复
16楼
可爱宝

不行，还是蓝色的，可能我是使用ipad的原因吧！但是话说不是支持safari的么？

2011-03-10 22:52 回复
- William 文章作者
  
  额，Safari是支持的，至于Ipad为嘛不支持我就不晓得。
  
  2011-03-11 13:17 回复
15楼
.sweetbao

紫色！？我要看看，这么神奇。

2011-03-10 22:48 回复
14楼
不在回头

他的回答挺有意思。

2011-03-10 18:35 回复
- William 文章作者
  
  是的，搞的我很无奈~
  
  2011-03-11 13:10 回复
13楼
益酷网

学习一下，更新的挺快！

2011-03-09 09:27 回复
12楼
世纪预言

晚上去PJ下加载试试，公司电脑配置低，家里电脑装的IE9。

2011-03-08 16:26 回复
- William 文章作者
  
  恩，两行代码，实现的效果还是不错的
  
  2011-03-11 13:18 回复
11楼
古墓候梅

CSS就是强大！！！

2011-03-07 20:32 回复
- William 文章作者
  
  呵呵，CSS的确很强大
  
  2011-03-07 23:23 回复
10楼
skidu

为啥我这里依旧是蓝色╮(╯▽╰)╭

2011-03-07 13:22 回复
- William 文章作者
  
  你用什么浏览器，不支持IE8及其以下版本IE的浏览器
  
  2011-03-07 17:39 回复
  - skidu
    
    紫色，正常的，我理解错了。。。我理解成超链接选中变色了╮(╯▽╰)╭
    
    2011-03-07 17:42 回复
    - William 文章作者
      
      呵呵，选择文字的背景啦~
      
      2011-03-07 18:10 回复
9楼
龙城瓶子

嘿嘿，又学到啦。。。

2011-03-07 12:58 回复
- William 文章作者
  
  哈哈，其实这个我觉得蛮好玩的，又不要太多的代码
  
  2011-03-07 17:38 回复
8楼
wmtimes

有些小细节确实很重要。

2011-03-07 11:03 回复
- William 文章作者
  
  恩啊，不过很多人是不太注意这个的
  
  2011-03-07 17:37 回复
7楼
power cord

谢谢博主分享知识，终于知道为啥字体会变成紫色了。

2011-03-07 11:00 回复
6楼
Lvtu

终于看到更新了，祝贺一下！
4的皮肤什么时候可以出来呀？

2011-03-07 10:40 回复
- William 文章作者
  
  呵呵，最近比较的忙。
  PJBlog4的主题2个大的页面搞好了，其他的就快了，当然还有些细节部分要修改之类的，还在研究中
  
  2011-03-07 17:37 回复
5楼
搁浅

吼吼。更新喽。又学习了

2011-03-07 10:31 回复
4楼
晨光博客

不错，有创意

2011-03-06 22:58 回复
- William 文章作者
  
  创意谈不上，其实也有一些网站用了的
  
  2011-03-07 17:36 回复
地板
Prouz

你啥时候换的紫色，不好看，只是特别点儿而已……
莫非我屏幕颜色不正常？？

囧orz…

2011-03-06 21:37 回复
- William 文章作者
  
  换紫色换了一段时间了，主要我喜欢紫色，所以就用紫色了
  
  2011-03-07 17:35 回复
  - Prouz
    
    …… 这个好深，你换个浅点的，我也挺喜欢紫色的
    
    2011-03-08 12:13 回复
    - William 文章作者
      
      不深吧，还好啦~
      
      2011-03-08 14:03 回复
板凳
逝魂

紫色挺舒服的看着。偶尔换换更个不错

2011-03-06 20:27 回复
- William 文章作者
  
  呵呵，是的，不过一般人不太注意这个的
  
  2011-03-07 17:34 回复
  - 逝魂
    
    我都是喜欢选中文字阅读的！
    
    2011-03-09 16:59 回复
沙发
Paran

IE8咋没看到啥情况啊

2011-03-06 19:48 回复
- Prouz
  
  哎，纠结~~看的不仔细吧！
  原文——
  
  当然这个是CSS3属性，只支持IE9，FireFox，Chrome，Safari，Opera。
  
  2011-03-06 21:36 回复
  - Paran
    
    不是当时想说怪不得IE8没动静哈啊
    
    2011-03-07 01:16 回复
    - Prouz
      
      …… 莫非是口误哈哈
      
      2011-03-08 12:12 回复

发表评论

21楼

legend

好东东，学到啦。我也自建了一个页面用用来测试css3。http://goease.net/css3.html

2011-11-27 19:54 回复

20楼

klant

呵呵，虽然笔记本已经换成了IE9，但是宿舍台式电脑还是IE7。

2011-03-27 12:55 回复

19楼

xuan律

这个倒是可以研究下，嘎嘎…虽然俺还在用360…

2011-03-16 21:58 回复

18楼

世纪预言

我把这两段代码复制到layout.css里，只能在chrome下有效果，在IE9下没效果，不知道是怎么回事！

2011-03-13 13:04 回复

William 文章作者

不应该啊，我用IE9打开我的博客能看见是紫色的么，这个支持IE9,FireFox,Chrome，Opera，Safari。

2011-03-13 14:37 回复
- 世纪预言
  
  又测试了几遍，还是一样在chrome下有效果，IE9下没效果，我用的是IE9 RC版，还有我用的是PJBLOG程序，不知道是不是和这个有关系，我用IE9访问你的博客是有效果的！
  
  2011-03-13 23:01 回复
  - William 文章作者
    
    对啊，很奇怪哦，应该加上去就会有出效果的
    
    2011-03-15 22:36 回复
    - 世纪预言
      
      只能希望PJ4加油了，希望不会让我们这些支持者失望，早点发布公测版！
      
      2011-03-16 03:07 回复

17楼

小星

这个还真没用过，晚上回去试试！

2011-03-11 16:02 回复

William 文章作者

可以用用，效果是不错滴

2011-03-11 17:08 回复

16楼

可爱宝

不行，还是蓝色的，可能我是使用ipad的原因吧！但是话说不是支持safari的么？

2011-03-10 22:52 回复

William 文章作者

额，Safari是支持的，至于Ipad为嘛不支持我就不晓得。

2011-03-11 13:17 回复

15楼

.sweetbao

紫色！？我要看看，这么神奇。

2011-03-10 22:48 回复

14楼

不在回头

他的回答挺有意思。

2011-03-10 18:35 回复

William 文章作者

是的，搞的我很无奈~

2011-03-11 13:10 回复

13楼

益酷网

学习一下，更新的挺快！

2011-03-09 09:27 回复

12楼

晚上去PJ下加载试试，公司电脑配置低，家里电脑装的IE9。

2011-03-08 16:26 回复

William 文章作者

恩，两行代码，实现的效果还是不错的

2011-03-11 13:18 回复

11楼

古墓候梅

CSS就是强大！！！

2011-03-07 20:32 回复

William 文章作者

呵呵，CSS的确很强大

2011-03-07 23:23 回复

10楼

skidu

为啥我这里依旧是蓝色╮(╯▽╰)╭

2011-03-07 13:22 回复

William 文章作者

你用什么浏览器，不支持IE8及其以下版本IE的浏览器

2011-03-07 17:39 回复
- skidu
  
  紫色，正常的，我理解错了。。。我理解成超链接选中变色了╮(╯▽╰)╭
  
  2011-03-07 17:42 回复
  - William 文章作者
    
    呵呵，选择文字的背景啦~
    
    2011-03-07 18:10 回复

9楼

龙城瓶子

嘿嘿，又学到啦。。。

2011-03-07 12:58 回复

William 文章作者

哈哈，其实这个我觉得蛮好玩的，又不要太多的代码

2011-03-07 17:38 回复

8楼

wmtimes

有些小细节确实很重要。

2011-03-07 11:03 回复

William 文章作者

恩啊，不过很多人是不太注意这个的

2011-03-07 17:37 回复

7楼

power cord

谢谢博主分享知识，终于知道为啥字体会变成紫色了。

2011-03-07 11:00 回复

6楼

Lvtu

终于看到更新了，祝贺一下！
4的皮肤什么时候可以出来呀？

2011-03-07 10:40 回复

William 文章作者

呵呵，最近比较的忙。
PJBlog4的主题2个大的页面搞好了，其他的就快了，当然还有些细节部分要修改之类的，还在研究中

2011-03-07 17:37 回复

5楼

搁浅

吼吼。更新喽。又学习了

2011-03-07 10:31 回复

4楼

晨光博客

不错，有创意

2011-03-06 22:58 回复

William 文章作者

创意谈不上，其实也有一些网站用了的

2011-03-07 17:36 回复

地板

Prouz

你啥时候换的紫色，不好看，只是特别点儿而已……
莫非我屏幕颜色不正常？？

囧orz…

2011-03-06 21:37 回复

William 文章作者

换紫色换了一段时间了，主要我喜欢紫色，所以就用紫色了

2011-03-07 17:35 回复
- Prouz
  
  …… 这个好深，你换个浅点的，我也挺喜欢紫色的
  
  2011-03-08 12:13 回复
  - William 文章作者
    
    不深吧，还好啦~
    
    2011-03-08 14:03 回复

板凳

逝魂

紫色挺舒服的看着。偶尔换换更个不错

2011-03-06 20:27 回复

William 文章作者

呵呵，是的，不过一般人不太注意这个的

2011-03-07 17:34 回复
- 逝魂
  
  我都是喜欢选中文字阅读的！
  
  2011-03-09 16:59 回复

沙发

Paran

IE8咋没看到啥情况啊

2011-03-06 19:48 回复

Prouz

哎，纠结~~看的不仔细吧！
原文——

当然这个是CSS3属性，只支持IE9，FireFox，Chrome，Safari，Opera。

2011-03-06 21:36 回复
- Paran
  
  不是当时想说怪不得IE8没动静哈啊
  
  2011-03-07 01:16 回复
  - Prouz
    
    …… 莫非是口误哈哈
    
    2011-03-08 12:12 回复

威言威语