Grow your CSS skills. Land your dream job.

Overriding The Default Text Selection Color With CSS

Published by Chris Coyier

text-selection-color.png

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those "forward-enhancement" techniques. It's a nice touch for those using modern browsers, but it just gets ignored in other browsers and it's not a big deal.

Here is the rub:

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

Within the selection selector, color and background are the only properties that work. What you can do for some extra flair, is change the selection color for different paragraphs or different sections of the page.

View Demo

All I did was use different selection color for paragraphs with different classes:

p.red::selection {
  background: #ffb7b7;
}
p.red::-moz-selection {
  background: #ffb7b7;
}
p.blue::selection {
  background: #a8d1ff;
}
p.blue::-moz-selection {
  background: #a8d1ff;
}
p.yellow::selection {
  background: #fff2a8;
}
p.yellow::-moz-selection {
  background: #fff2a8;
}

Note how the selectors are not combined, even though the style block is doing the same thing. It doesn't work if you combine them:

/* Combining like this WILL NOT WORK */
p.yellow::selection,
p.yellow::-moz-selection {
  background: #fff2a8;
}

That's because browsers ignore the entire selector if there is a part of it they don't understand or is invalid. There is some exceptions to this (IE 7?) but not in relation to these selectors.


For even more crazy flair, you could reveal an image with text selection.

Comments

  1. Permalink to comment#

    I especially like the cute colours you chose :)

  2. Permalink to comment#

    As far as forward-enhancement techniques go, this one is pretty kick-butt. Admittedly, only about 20% of the average current viewer base will ever see it, but it’s a fantastic visual touch for those who do, and it does no harm whatsoever to those who don’t. Great tip!

  3. Permalink to comment#

    That’s really cool. It’s something that most visitor would never see, but the ones that do would be surprised. Although I don’t see why Firefox had to add -moz- to for their browser… should probably go recommend them to change it.

  4. I really liked this idea so I took it to the next level:
    http://metaatem.net/selcolor.php

  5. Ok, I couldn’t leave well-enough alone. Here’s the next step:
    Web Standards FTW!

  6. glandebarroco
    Permalink to comment#

    thats was cool Erik

  7. Yay ! I implemented it here: http://www.barefootstudios.ca/

  8. Thanks everyone. I’ve cleaned it up and put it on EC2. Here’s the new url, please let me know if it doesn’t work for you!
    http://metaatem.net/highlite/

  9. sinsim
    Permalink to comment#

    doesn’t work in opera

  10. This does not work for me either!! FF2

  11. bart
    Permalink to comment#

    oh, it’s really nice thing for modern browsers users. It works great in Opera 9.5, same with Yours ‘Hide an image in html’

  12. @Jermayn: It absolutely works in Firefox 2. Does the example page not work for you?

    @bart: That’s cool it works in Opera 9.5. So now it’s just IE left behind (as far as major browsers go).

  13. Nice effect! Is there any way to define the color of the text when it’s highlighted?

  14. MeMe

    @Martha Retallick:
    Offcourse you can! Just use color:

  15. Calum
    Permalink to comment#

    I can’t seem to get this working in Opera, does anybody know why?

    Here is the code:

    *::selection {
    background: #C32A22;
    color: #DFDCDC;
    }
    *::-moz-selection {
    background: #C32A22 none repeat scroll 0 0;
    color: #DFDCDC;
    }

    • GR
      Permalink to comment#

      Use this but they don’t seem to work on editable text like in an input field:

      ::selection {background-color: #ffb7b7;}
      ::-moz-selection {background-color: #ffb7b7;}
      ::-webkit-selection {background-color: #ffb7b7;}

    • Tanner
      Permalink to comment#

      From the article:

      “At the time of this writing, only Safari and Firefox are supporting this…”

      That said, the prefix for Opera is -o-, so if Opera’s support for this has changed since then, try ::-o-selection {background:#C32A22;}. As said in the article above, “background is the only property that works”, so declaring a color is just added typing. Using color:#DFDCDC; for this will not change the color of the highlighted text.

      Webkit is a Safari thing. Opera may choose to support it, I suppose, but they are not obligated to do so.

      TBH, I’m not much for using all the prefixes. They add a lot of weight to the CSS and are not always well-supported. I generally wait until all the browsers (or at least all but IE) have added support for the property sans prefix or I use Lea Verou’s prefix-free script. (http://lea.verou.me/prefixfree/) Sure, any script adds weight, but at least it’s less work on my end, since I can just delete the script again once it’s no longer needed, without having to go through every line of CSS deleting redundant code.

  16. Permalink to comment#

    works great in chrome too

  17. LucFol
    Permalink to comment#

    pity it doesn’t work for inputs (works probably only in Firefox)

  18. Michele
    Permalink to comment#

    Hi, this didn’t work for me at first until I changed ‘background’ to ‘background-color’. Now it works great. Thanks! Very cool.

  19. Permalink to comment#

    Apparently ::selection and ::-moz-selection don’t validate.

  20. lc
    Permalink to comment#

    Defining sections p.red::selection only seems to work with paragraphs, at least when I tried with div.red::selection it had no effect, which is a shame.

  21. Kushal
    Permalink to comment#

    I want to change the selected text font color. Any addition or modification in code please.

  22. Padre Mucho
    Permalink to comment#

    Really nice thanks! I was just wondering if there’s a way to also change the grey color selection on blur (like when you click on the browser’s address bar)

  23. Permalink to comment#

    Nice little effect…just implemented this on a site and it works like a charm (and in Chrome). Quick and easy style edits. Some clients love this kind of attention to detail too. Thanks!

  24. Permalink to comment#

    Hi,
    I have a question: Why canĀ“t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
    Greetings

    • That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores the whole selector (even if they are comma separated). There are some exceptions but mostly in old browsers (IE 7?).

    • Dave
      Permalink to comment#

      @Chris, but this does work:

      input       { -moz-border-radius:10px; -webkit-border-radius:10px; }
      

      Why is that? What’s the difference?

    • Meta_Ing
      Permalink to comment#

      Dave – Browsers need only ignore property declarations with invalid/unrecognized names or values, not the entire rule nor the line they are on. Whether you list property declarations on separate lines, or put them all on one line, doesn’t really matter.

      Want to get slightly more technical?

    • Dave
      Permalink to comment#

      Thanks @Meta_Ing, that makes perfect sense now :)

  25. axmi
    Permalink to comment#

    Its not working in IE 8

  26. GR
    Permalink to comment#

    Works well in webkit for static text but has no effect on textarea or input!

  27. Great write up thanks.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".