Custom Text Selection Color.

Are you tired of seeing that default light blue ‘highlight’ color when you select text from a website? Well I’m going to show you how to punch up the text selection color with CSS, not only for you to use on your website, but for your clients websites as well. This is a super simple customization and can add visual detail to a website, and sometimes it’s the little things about your site that make you stand out from the rest.

As mentioned above, this is the default light blue ‘highlight’ color you see when you select text from just about any website you visit. Websites that have custom text selection color—like this website—are done so by the designer or developer who pays attention to detail. Below is the custom CSS code I used for this website which results as this.

::selection { background: #4F80FF !important; color: #FFFFFF !important; }
::-moz-selection { background: #4F80FF !important; color: #FFFFFF !important; }
::-webkit-selection { background: #4F80FF !important; color: #FFFFFF !important; }
::-ms-selection { background: #4F80FF !important; color: #FFFFFF !important; }

Now you’re probably wondering why I repeated the code, and the answer is for cross-browser compatibility. Let me explain, the ::selection is your standard CSS code that controls the customization of the text selection, the ::-moz-selection is for the Firefox browser, the ::-webkit-selection is for Safari and Google Chrome and the ::-ms-selection is for Internet Explorer. As of now, all you can do is change the background color and the text color, but that doesn’t mean you can’t utilize it in different ways. For example, you can make each paragraph—when selected—have it’s own color.

(Example 1)
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour.”

(Example 2)
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour.”

You can even have different ‘highlight’ colors on the same line, for example, orange and purple:

(Example 3)
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour.”

So how did I do that? I simply added a span tag with a “.class” attribute to the text. For example, for the orange and purple text, I wrote the HTML like this:

<span class=”orange-highlight”>Lorem ipsum …</span> <span class=”purple-highlight”>Lorem ipsum …</span>

Then I wrote the custom CSS like this:

.orange-highlight::selection { background: orange !important; color: #FFFFFF !important; }
.purple-highlight::selection { background: purple !important; color: #FFFFFF !important; }

And yes, I added the cross-browser code as well, I just didn’t need to show you all that code again.

And that’s it, like I stated before, it’s pretty simple. Just remember, if you write this custom CSS code in your style.css file, be sure to back up the original before overwriting the file on your server. Depending on the theme you use, you may have a custom CSS panel to write code in, or you could download a custom CSS plugin. All-in-all, it’s a great technique that adds visual detail to any website even though only about 1% of people will ever notice it. The only downside—at the moment—is it only works on computers and not mobile devices, and you cannot add any other CSS element styles to it.

Pin It on Pinterest