Change Text Selection Background Color using CSS

Change Text Selection Background Color with CSS

Almost all web browsers by default highlight the selected text on a webpage with a light blue background. But did you know that using CSS, you can change the color, background-color or any other CSS property of a selected chunk of text?

You may have seen such effect on several beautifully designed websites and may have wondered how is it achieved.

You too can achieve this by using the ::selection CSS selector which is supported by IE9, Safari and Google Chrome and ::moz-selection selector which is supported by Mozilla Firefox

Here is a usage example:

/* Works in Safari, IE9, Google Chrome */
::selection {
       background-color: #d75139;
       color: #fff;
}

/* Mozilla based browsers */
::-moz-selection {
       background-color: #d75139;
       color: #fff;
}

Note that you cannot combine both the selectors like this:


/* This wont work! */
::moz-selection,::selection {
       background-color: #d75139;
       color: #fff;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2018 All rights reserved | Powered by WordPress
Back to top
Theme by dynamicguru.com