当前位置: 首页 > 设计 > 正文
avatar

当网页的文字被选中时通常是蓝色的,有可能与网页的颜色不协调。其实我们可以自定义其颜色,这样一来选择就千变万化了,感觉是不是很好?

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

然后我就小小的夸奖了一翻,我说你应该用的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。

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

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

  1. avatar
    21楼
    legend Google Chrome Windows

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

    2011-11-27 19:54 [回复]
  2. avatar
    20楼
    klant Internet Explorer Windows

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

    2011-03-27 12:55 [回复]
  3. avatar
    19楼
    xuan律 Internet Explorer Windows

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

    2011-03-16 21:58 [回复]
  4. avatar
    18楼
    世纪预言 Internet Explorer Windows

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

    2011-03-13 13:04 [回复]
    • avatar
      William Mozilla Firefox Windows

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

      2011-03-13 14:37 [回复]
      • 又测试了几遍,还是一样在chrome下有效果,IE9下没效果,我用的是IE9 RC版,还有我用的是PJBLOG程序,不知道是不是和这个有关系,我用IE9访问你的博客是有效果的!

        2011-03-13 23:01 [回复]
        • avatar
          William Internet Explorer Windows

          对啊,很奇怪哦,应该加上去就会有出效果的

          2011-03-15 22:36 [回复]
          • 只能希望PJ4加油了,希望不会让我们这些支持者失望,早点发布公测版!

            2011-03-16 03:07 [回复]
  5. avatar
    17楼
    小星 Mozilla Firefox Windows

    这个还真没用过,晚上回去试试!

    2011-03-11 16:02 [回复]
    • avatar
      William Maxthon Windows

      可以用用,效果是不错滴

      2011-03-11 17:08 [回复]
  6. avatar
    16楼
    可爱宝 Safari iPad

    不行,还是蓝色的,可能我是使用ipad的原因吧!但是话说不是支持safari的么?

    2011-03-10 22:52 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-11 13:17 [回复]
  7. avatar
    15楼
    .sweetbao Netscape Navigator iPad

    紫色!?我要看看,这么神奇。

    2011-03-10 22:48 [回复]
  8. avatar
    14楼
    不在回头 Internet Explorer Windows

    他的回答挺有意思。

    2011-03-10 18:35 [回复]
    • avatar
      William Maxthon Windows

      是的,搞的我很无奈~

      2011-03-11 13:10 [回复]
  9. avatar
    13楼
    益酷网 Internet Explorer Windows

    学习一下,更新的挺快!

    2011-03-09 09:27 [回复]
  10. avatar
    12楼
    世纪预言 Internet Explorer Windows

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

    2011-03-08 16:26 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-11 13:18 [回复]
  11. avatar
    11楼
    古墓候梅 Internet Explorer Windows

    CSS就是强大!!!

    2011-03-07 20:32 [回复]
    • avatar
      William Internet Explorer Windows

      呵呵,CSS的确很强大

      2011-03-07 23:23 [回复]
  12. avatar
    10楼
    skidu 搜狗浏览器 Windows

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

    2011-03-07 13:22 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-07 17:39 [回复]
      • avatar
        skidu 搜狗浏览器 Windows

        紫色,正常的,我理解错了。。。我理解成超链接选中变色了╮(╯▽╰)╭

        2011-03-07 17:42 [回复]
        • avatar
          William Maxthon Windows

          呵呵,选择文字的背景啦~

          2011-03-07 18:10 [回复]
  13. avatar
    9楼
    龙城瓶子 Google Chrome Windows

    嘿嘿,又学到啦。。。

    2011-03-07 12:58 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-07 17:38 [回复]
  14. avatar
    8楼
    wmtimes Google Chrome Windows

    有些小细节确实很重要。

    2011-03-07 11:03 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-07 17:37 [回复]
  15. avatar
    7楼
    power cord Google Chrome Windows

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

    2011-03-07 11:00 [回复]
  16. avatar
    6楼
    Lvtu Internet Explorer Windows

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

    2011-03-07 10:40 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-07 17:37 [回复]
  17. avatar
    5楼
    搁浅 Internet Explorer Windows

    吼吼。更新喽。又学习了

    2011-03-07 10:31 [回复]
  18. avatar
    4楼
    晨光博客 Internet Explorer Windows

    不错,有创意

    2011-03-06 22:58 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-07 17:36 [回复]
  19. avatar
    地板
    Prouz Google Chrome Windows

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

    囧orz…

    2011-03-06 21:37 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-07 17:35 [回复]
      • avatar
        Prouz Google Chrome Windows

        …… 这个好深,你换个浅点的,我也挺喜欢紫色的

        2011-03-08 12:13 [回复]
        • avatar
          William Maxthon Windows

          不深吧,还好啦~

          2011-03-08 14:03 [回复]
  20. avatar
    板凳
    逝魂 Maxthon Windows

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

    2011-03-06 20:27 [回复]
    • avatar
      William Maxthon Windows

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

      2011-03-07 17:34 [回复]
      • avatar
        逝魂 Mozilla Firefox Windows

        我都是喜欢选中文字阅读的!

        2011-03-09 16:59 [回复]
  21. avatar
    沙发
    Paran Internet Explorer Windows

    IE8咋没看到啥情况啊

    2011-03-06 19:48 [回复]
    • avatar
      Prouz Google Chrome Windows

      哎,纠结~~看的不仔细吧!
      原文——

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

      2011-03-06 21:36 [回复]
      • avatar
        Paran Internet Explorer Windows

        不是 当时想说怪不得IE8没动静 哈啊

        2011-03-07 01:16 [回复]
        • avatar
          Prouz Google Chrome Windows

          …… 莫非是口误 哈哈

          2011-03-08 12:12 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter