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

当前位置：首页 > 设计 > 正文

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

William2011-03-06 14:47设计8,343次阅读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 | 威言威语

赏

【上一篇】入手HTC Desire(G7)
【下一篇】加载多个广告不影响网页打开速度

您可能还会对这些文章感兴趣！

修改网页文字选择默认的蓝色：目前有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 [回复]