Style highlighted / selected text - CSS Tutorial

Date: 26th October 2008 at 12:56 pm | Filed under: scripts | Author: Sam Burdge

Ever wondered how to change the default style of highlighted or selected text in your html page? I have found that this is possible using CSS3, although IE has no support for this so it doesn't work at all in IE.

In this example the background is set to green and the text set to white. Drag over this text to highlight it.

Here's the CSS:

/* Safari */
::selection {
background: #000000;
color: #ffffff;
}
/* Firefox */
::-moz-selection {
background: #000000;
color: #ffffff;
}

::selection is supported by the latest versions of Opera and Firefox 2 and upwards. ::-moz-selection is supported by the latest versions of Safari.

1 Response to “Style highlighted / selected text - CSS Tutorial”

  • Comment by roy
    Date: July 2nd, 2009 at 11:13 am

    thank you very much looking for this for a while, had no idea what to look for to find it either, thanks!

Leave a Comment