DEV Community

loading...
Cover image for Change Text Highlight Color with CSS

Change Text Highlight Color with CSS

braydoncoyer profile image Braydon Coyer Originally published at braydoncoyer.dev Updated on ・2 min read

I’m pretty active on CodePen. A few months ago, I posted a pen that demonstrates how to change the highlight color of text on the page. I thought it may be neat to write up a short article that will walk you through the basics, and then go a bit deeper with CSS variables.

The Basics

It’s pretty simple. To change the color of the highlighted-text, simply target the ::selection selector and then define the color of the background property.

Check out the snippet below.

::selection {
  background: red;
}

Enter fullscreen mode Exit fullscreen mode

Screen Shot 2020-10-19 at 1.50.54 PM.png

Diving Deeper

Now that we know how easy it is to change the highlight color, let’s take it a step further and rotate colors by utilizing a bit of JavaScript and a single CSS variable.

First, in your JavaScript, define an array of strings - each item in the array is a hexadecimal color value.

Here’s my array:

const colors = ["#c1b001", "#a8140e", "#4315aa", "#359d09", "#8f4762"];
Enter fullscreen mode Exit fullscreen mode

We want to randomly assign a color from the array to our CSS variable when the user has their mouse button down to select some text.

In order to do this, we need to create a new event listener and listen for the mousedown event.

Here’s my event listener:

window.addEventListener("mousedown", () => {
 // code will go here
});

Enter fullscreen mode Exit fullscreen mode

Now that we have this event set up, there’s three things we need to do:

  1. Grab and remove the first color from the array
  2. Set the CSS variable with the value we get back from the array
  3. Push the color variable from step 1 so it is now on the bottom of the array

This will gives us the rotating color functionality.
Here’s my completed function:

window.addEventListener("mousedown", (e) => {
  const color = colors.shift();
  document.documentElement.style.setProperty("--highlight-color", color);
  colors.push(color);
});

Enter fullscreen mode Exit fullscreen mode

We’ve referenced a CSS variable named —highlight-color but have not defined it yet.

In your CSS, define the variable and initialize it to null.

:root {
  --highlight-color: null;
}
Enter fullscreen mode Exit fullscreen mode

Finally, target the ::selection selector and set the background property to the value in the CSS variable.

::selection {
  background: var(--highlight-color);
}
Enter fullscreen mode Exit fullscreen mode

And there we go! Here's the final pen - feel free to try it out!

See the Pen 🎨 Text Highlight Color Change 🎨 by Braydon Coyer
(@braydoncoyer) on CodePen.

As always, if you want more content like this, follow me on Twitter and make sure to subscribe to my newsletter for future articles and tutorials!

Discussion (0)

pic
Editor guide