How to change text selection highlight color using CSS
  John Mwaniki /   13 Oct 2021

How to change text selection highlight color using CSS

When you select some text on a web page by pressing and holding the left mouse key and dragging the mouse over the text, the background, and color of the selected text change from that of other texts.

If you try selecting text on different websites, you are likely to notice (or have already) that the highlight background and text color may vary from one site to another.

Example 1

Green text highlight color on webpage

Example 2

Light green text highlight color on webpage

Example 3

Orange text highlight color on webpage

This highlight color can differ due to:

  • The default highlight color of the user's operating system.
  • Customization by the developer.

The default highlight color of the user's operating system

Each operating system has its own default text highlight color. When you select the same text on the same web page across different operating systems, you will notice that the highlight color may differ.

Example 1

I took the screenshot below on a page from this website using Firefox browser on Ubuntu 20.04.

Dark orange text highlight color on webpage

Example 2

I took the screenshot below from the same web page as the above using the Firefox browser on Windows 10.

Blue text highlight color on webpage

Customization by the developer

As a website developer, you have control over the look and feel of your website. You can decide which colors you want to be highlighting texts on your website by simply using CSS styling.

How to preferred text highlight color with CSS

To set the text selection/highlight color, we use the CSS ::selection pseudo-element.

The following CSS properties can be applied to ::selection:

  • color
  • background
  • cursor
  • outline

You can customize all the above properties on your webpage selection using ::selection as in the examples below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Setting text highlight color</title>
<style>
::selection {
  color: yellow;
  background: green;
}
</style>
</head>
<body>
<h1>Heading one</h1>
<p>This is a sample paragraph. Select it to highlight!</p>
<div>This is a div element</div>
</body>
</html>

Below is the screenshot of the above page with the paragraph highlighted with green background color and yellow text color.

Custom text highlight color on webpage using CSS

In case you want the highlight color to only apply to specific page elements eg. a div, a paragraph, etc, you just add the CSS selector of that element before ::selection.

Example

p::selection {
  color: white;
  background: blue;
}

You can as well use the Id or Class of the element with the ::selection pseudo-element.

#paragraph1::selection {
  color: yellow;
  background: green;
}
.paragraph2::selection {
  color: white;
  background: orange;
}

From the example above, the text within an element with the id paragraph1 will have a yellow color and green background on selection. The text within an element with the class paragraph2 will have a white color and orange background on selection.

Conclusion

Selecting some text on a web page makes the selecting text have a different color and background color. These colors may differ depending on the operating system you use and as a result of the customization by the developer.

The developer can easily customize the highlight/selection background and text colors through the use of CSS ::selection pseudo-element with the color and background properties.