Home / Tutorials / CSS3 / How To Change Default Text Selection Colour : CSS3 Tutorial

How To Change Default Text Selection Colour : CSS3 Tutorial

/
/
73 Views

Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further.

Currently FireFox, Safari, Chrome and Opera support the text section attribute, and the browsers that don’t support it simply ignore the code so nothing will break, so it doesn’t really matter.

Don’t forget to Subscribe to Email Newsletter, Follow us on Twitter and Like us on Facebook – for recent updates.

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.

VIEW DEMO

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Subscribe to our Newsletter

If you liked this article, then please subscribe to our newsletter for latest web resources. You can also find us on Twitter and Facebook.

  • Chris F.A. Johnson

    Using Firefox 6.0, all the text is black on white.

  • Chris F.A. Johnson

    Using Firefox 6.0, all the text is black on white.

Subscribe To Our Blog For All The Latest & Greatest Freebies!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

We don't spam and your information will never be shared.

Subscribe To Our Blog For All The Latest & Greatest Freebies!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

We don't spam and your information will never be shared.