When I read text on websites, I tend to highlight sentences as I read them. And I’ve noticed that lately a lot of websites are forgoing the standard blue color highlight, and it’s awesome. Changing the highlight color on your website can add a bit of personality and fun – the little details are often what people remember most. Follow the 4 steps below to change the highlight color on your website!
Find out where the CSS code for the highlight (“selection”) is in your website’s stylesheet. To do this, highlight some text on your site, right-click, and check Inspect Element.
The Inspect Element box will pop up at the bottom of your screen. In the lower right, you’ll see a) what your selection color is and b) where you selection color is located in your website’s stylesheet.
Navigate to your website’s stylesheet*. Using Inspect Element as your guide, find the line with the selection color (it’s the number in the right of the above photo: “style.css: 176”). Here, you’ll find two classes for selection color. This is because different browsers read this differently – they need to be kept separate in order to work across all browsers. Now that you know where the color is, you can change it to match your site’s theme. Make sure to save a copy of your stylesheet before making changes, just in case anything goes wrong! Make your changes, save, and clear your site’s cache if necessary. The first image below is what I currently have on my site. The image directly below is what I changed it to for the purposes of this blog post.
* Please note, when I say stylesheet, I mean your child theme’s stylesheet. Making changes to the theme itself is a no-no, since any upgrade you make to your theme will override all custom code that you’ve put in. Hard work = gone.
Check out your site’s new selection color! Pretty cool, right?
CSS for Web Designers
Learn more about my upcoming CSS for Web Designers course, and get useful tools + tutorials to make you a better web designer.