How to Change the Default Text Selection Color in WordPress

Last updated Jul 11, 2019

You know what makes your website’s design stand out? Attention to details. One of these details that caught our attention on Brian Gardner’s (@bgardner) website was the way his default text selection color matched his design color scheme rather than being the default blue color. In this article, we will show you how to change the default text selection color in your WordPress theme.

Open your style.css file and add the following styles:

  ::-moz-selection {      background-color: #ff6200;      color: #fff;  }    ::selection {      background-color: #ff6200;      color: #fff;  }

Don’t forget to change the background color to match your theme’s color scheme.

The ::selection selector is used by Chrome, Safari, IE9+, and Opera. Firefox likes to use their own ::-moz-selection. This is the reason why they are on two separate lines. If you try to combine them, it will not work.

For demo, simply select any of the text on this site.

Source: Brian Gardner