When you click and drag your mouse to select text on a website it highlights the text by giving it a default blue background colour. This blue text selection colour is set by your browser, but wouldn’t it be nice to be able to change it?
Perhaps you’d like to change it to a colour that matches your website colour scheme? Well, it’s pretty simple to change the background color of selected text by using CSS 3. It will work on modern browsers including Firefox and Safari and simply be ignored by other browsers.
In order to get this working you simply need to add the following styles to your Stylesheet. Let’s assume that you want your selected text to be white with a red background.
/* Change background color of selected text */
::selection {
background: #FF0000;
color: #FFFFFF;
}
::-moz-selection {
background: #FF0000;
color: #FFFFFF;
}
Now you have successfully overridden the default text selection colour with a few lines of CSS.
Adham Dannaway
Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!
This is well bad man! 🙂
Why don’t I give the same background color to the selected text? It will seem like no text is selected 🙂