We have setup a demo which you can test out further down the page; we have used the DesignJuices colours in the example.

The basic snippet to achieve this is:

[css]

/* selection */

::selection { background:#d3d3d3; color:#555; }

::-moz-selection { background:#d3d3d3; color:#555; }

::-webkit-selection { background:#d3d3d3; color:#555; }

/* end selection */

[/css]

Now if you were aiming for one colour for every text item whilst highlighted that is enough for you, but there may be circumstance you need to have different coloured highlights for different sections of your page.

We can have more than one instance of this by using classes, for example:

[css]

/* classed selection */

p.orange::selection { background:#c2660d; color:#fff; }

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

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

p.blue::selection { background:#2d7e99; color:#fff; }

p.blue::-moz-selection { background:#2d7e99; color:#fff; }

p.blue::-webkit-selection { background:#2d7e99; color:#fff; }

/* end classed selection */

[/css]

Take a look at the demo to see the effect in all its glory, please note you will have to view using a compatible browser as mentioned above.

Email-subscription

Sign up for our newsletter to receive the latest news and event postings.

Write for Us

If you have an idea for an article to be published here at Pixel2Pixel Design, we'd love to hear it. In return, you would get a short biography at the end of a post, a link to your website, and a link to your Twitter feed.

Send us an email with your article idea, your name and email so we can get back to you!