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; /* Safari */
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}

Within the selection selector, background is the only property that works. What you CAN do for some extra flair, is change the selection color for different paragraphs or different sections of the page.

[VIEW EXAMPLE]

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;
}

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;}

  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?

  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!

Leave a Comment

Current day month ye@r *

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