Change color of selection

Question

When you select text in browser, most often background behind text being selected changes color to blue. How to change this color to another?

Answer 1

You are looking for the selection pseudo-element.

::-moz-selection{ background: #000; color:#fff;}
::selection { background:#000; color:#fff; }

Also, as a side note. If you plan on using text-shadow in your site at all, I would recommend adding text-shadow:none; to your ::selection styling. As you can see in this fiddle, it is really hard on the eyes.

Answer 2

Take a look at this article...

http://css-tricks.com/490-overriding-the-default-text-selection-color-with-css/

... so something like this:

p.moz::-moz-selection {
    background:#cc0000;
    color:#fff;
}

p.webkit::-webkit-selection {
    background:#cc0000;
    color:#fff;
}

p.normal::selection {
    background:#cc0000;
    color:#fff;
}

I hope this helps.
Hristo