With the movement of CSS3, developers and designers are now able to add nice little touches to their website design allowing them to enhance the users browsing experience.

If you’ve ever been on a website and thought to yourself ‘I wonder if you can change the background colour of a selected element ‘, well the answer is simple, yes you can! And boy is it easy…  with a simple CSS3 declaration.

This declaration allows developers to add that nice little effect to their personal or clients site with ease.

Top Tip:It might be worth noting that this style only works on Firefox and Safari as CSS3 is relatively new and some of the older browsers are not able to offer support for it yet.

The beauty of using these CSS3 styles is that you can use them, and if the older browsers do not support/recognize them then it’s really not a big deal as the site can function perfectly well without it. But nonetheless it’s a nice treat for those viewers who are most likely to appreciate it and based on the research carried out in my office it’s mainly web designers who notice! So if it goes unnoticed by your client at least you know it looks pretty for your viewing pleasure!

Right, all that aside lets get down to the code…

The basic structure of the selection highlighter is simple:

Safari uses this structure:

::selection { background: #E3000A; }

Firefox uses this structure:

::-moz-selection { background: #E3000A; }

So that’s it, really simple and adds the highlight colour of the selection background to all elements on the web page.

This can be taken one step further. That is to add this selection to only elements that you want to be effected by it, so for example, to add this highlighter to everything inside the you can declare it in this way:

For Safari

p::selection { background: #E3000A; }

or for Firefox

p::-moz-selection { background: #E3000A; }

One to take it even further? Style the text to change based on the selection by declaring a ‘color: #FFF’ style to suit your needs. This is handy if you wanted to make the selection colour of your background the same as your default text colour but didn’t want to text to disappear.

Basically like this:

For Safari

p::selection { background: #E3000A; color: #FFF }

or for Firefox

p::-moz-selection { background: #E3000A; color: #FFF }

So that’s it guys, really simple tutorial but one that in my opinion is really awesome and will improve your website design tenfold!

Written by Warren Jerzyszek a website designer for Creare Group, a leading website design offering bespoke websites.