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

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

William2011-03-06 14:47设计13,765次阅读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 回复
  - 世纪预言：
    
    @William又测试了几遍，还是一样在chrome下有效果，IE9下没效果，我用的是IE9 RC版，还有我用的是PJBLOG程序，不知道是不是和这个有关系，我用IE9访问你的博客是有效果的！
    
    2011-03-13 23:01 回复
    - William博主：
      
      @世纪预言对啊，很奇怪哦，应该加上去就会有出效果的
      
      2011-03-15 22:36 回复
      - 世纪预言：
        
        @William只能希望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博主：
  
  @skidu你用什么浏览器，不支持IE8及其以下版本IE的浏览器
  
  2011-03-07 17:39 回复
  - skidu：
    
    @William紫色，正常的，我理解错了。。。我理解成超链接选中变色了╮(╯▽╰)╭
    
    2011-03-07 17:42 回复
    - William博主：
      
      @skidu呵呵，选择文字的背景啦~
      
      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博主：
  
  @wmtimes恩啊，不过很多人是不太注意这个的
  
  2011-03-07 17:37 回复
7楼
power cord：

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

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

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

2011-03-07 10:40 回复
- William博主：
  
  @Lvtu呵呵，最近比较的忙。
  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博主：
  
  @Prouz换紫色换了一段时间了，主要我喜欢紫色，所以就用紫色了
  
  2011-03-07 17:35 回复
  - Prouz：
    
    @William…… 这个好深，你换个浅点的，我也挺喜欢紫色的
    
    2011-03-08 12:13 回复
    - William博主：
      
      @Prouz不深吧，还好啦~
      
      2011-03-08 14:03 回复
板凳
逝魂：

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

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

IE8咋没看到啥情况啊

2011-03-06 19:48 回复
- Prouz：
  
  @Paran哎，纠结~~看的不仔细吧！
  原文——
  
  当然这个是CSS3属性，只支持IE9，FireFox，Chrome，Safari，Opera。
  
  2011-03-06 21:36 回复
  - Paran：
    
    @Prouz不是当时想说怪不得IE8没动静哈啊
    
    2011-03-07 01:16 回复
    - Prouz：
      
      @Paran…… 莫非是口误哈哈
      
      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 回复
- 世纪预言：
  
  @William又测试了几遍，还是一样在chrome下有效果，IE9下没效果，我用的是IE9 RC版，还有我用的是PJBLOG程序，不知道是不是和这个有关系，我用IE9访问你的博客是有效果的！
  
  2011-03-13 23:01 回复
  - William博主：
    
    @世纪预言对啊，很奇怪哦，应该加上去就会有出效果的
    
    2011-03-15 22:36 回复
    - 世纪预言：
      
      @William只能希望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博主：

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

2011-03-07 17:39 回复
- skidu：
  
  @William紫色，正常的，我理解错了。。。我理解成超链接选中变色了╮(╯▽╰)╭
  
  2011-03-07 17:42 回复
  - William博主：
    
    @skidu呵呵，选择文字的背景啦~
    
    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博主：

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

2011-03-07 17:37 回复

7楼

power cord：

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

2011-03-07 11:00 回复

6楼

Lvtu：

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

2011-03-07 10:40 回复

William博主：

@Lvtu呵呵，最近比较的忙。
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博主：

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

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

板凳

逝魂：

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

2011-03-06 20:27 回复

William博主：

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

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

沙发

Paran：

IE8咋没看到啥情况啊

2011-03-06 19:48 回复

Prouz：

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

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

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

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

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

发表评论

主题下载

最新评论

热门日志

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

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

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

发表评论

主题下载

最新评论

热门日志