Text selection color CSS - Overriding the select highlight color WP Tutorial

When styling the visual appearance of a website, developers often forget about a tiny detail. We’re talking about the text select highlight color which is often left on it’s default value. Depending on the website color palette, sometimes the highlighted text might just not look right. The text selection color CSS code is pretty simple to implement, yet the result in some cases can significantly enhance the user experience.

Why should you even care about the CSS text highlight color override?

In most cases the CSS text highlight color override gets omitted from styling a website. Web designers and developers usually take the default selected text highlight color for granted and don’t bother about adjusting it according to the website color palette. Some less experienced developers don’t even know about the possibility to customize it using a simple text selection color CSS selector.

For websites where visitors are not expected to copy and paste (and therefore select) parts of the content, not customizing the text highlight color with CSS isn’t a huge issue. In the other hand, visitors often copy different parts of the content such as paragraphs, links, e-mails, phone numbers, addresses etc. For websites where such visitor’s behavior is expected, it’s recommended to customize the highlight color using the text selection color CSS pseudo element.

Using text selection color CSS code in WordPress

Often omited, custom selected text higlight color is a good practice when styling a website.

How to use text selection color CSS code in WordPress

Most WordPress themes have a default text highlight color set in it’s style sheet. In most cases it’s a light blue shade for the highlighted background and black or white text color. The process of customizing those colors according to your website’s color palette is pretty simple. Firstly you have to locate the text selection color CSS code inside your theme’s style sheet. The default style sheet is usually called style.css and it’s accessed trough the WordPress theme editor ( Appearance → Theme editor ).

Pro Tip: When editing WordPress style sheets, it’s a good practice to create a Child theme and edit your style sheet there. By doing so, the modifications to your theme files won’t get lost when you update the original theme. The process of creating a Child theme, is described in the WordPress Theme Handbook.

Inside your theme’s style sheet find the ::selection CSS selector. The ::selection CSS selector or pseudo-element defines the selected text highlight color and it’s usually defined with the background-color CSS property. In some cases you’ll find the color property there too. For example, in the default WordPress theme Twenty Nineteen the selected text higlight color CSS code looks like this:

::-moz-selection {  background-color: #bfdcea;  }

::selection {   background-color: #bfdcea;  }

For full cross-browser compatibility, ::moz-selection is used to define the selected text highlight color in Firefox and ::selection is used for all other browsers. By editing the background-color property value and optionally adding the color property, you can customize the text selection color CSS code completely according to the color palette used on your website.

NOTE: Some themes don’t specify the selection higlight color and rely on the browser’s default behavior when higlighting the selected text. In such cases you won’t find the ::selection pseudo-element inside your style sheet. Nevertheless you can just copy one of the following code snippets inside your style sheet and adjust the color values according to your needs.

In the following example we’ll customize the selected text color CSS properties to simulate a florescent green text marker:

::-moz-selection {
    background-color: lime;
    color: black;
}

::selection {
    background-color: lime;
    color: black;
}

Other possibilities when customizing the text selection color CSS code

The ::selection CSS selector in the previous example affects the whole website. But what if your website has different sections with different background and text colors? In that case the predefined selected text higlight color might look good on some sections, while it could cause visual irregularities on other sections. Luckily, we can use different text selection color CSS codes for different parts of the website.

Let’s take for example that our website has a bright background content area and a dark footer. To avoid visual irregularities when selecting the text anywhere on the website, we’ll define a default overall selection highlight color and a different higlight color for the footer. In that case our text selection color CSS code would look something like this:

/* Overall selection highlight color  */

::-moz-selection {  background-color: lime;
                    color: black;    }

::selection {   background-color: lime;
                color: black;  }

/* Footer only selection highlight color  */

footer ::-moz-selection { background-color: darkorchid;
    			          color: white; }

footer ::selection {  background-color: darkorchid;
                      color: white;   }

Furthermore, we can target any HTML element by its id or class name and specify it’s own text selection highlight color. If we have a web site with different content sections in their own colors, we can define a specific text selection color for each section. Let’s say our web page has three sections of content, each with it’s own background color. In that case our text selection color CSS code would look like this:

#white-section ::-moz-selection {  background-color: lime;
    		                       color: black;    }

#white-section ::selection {   background-color: lime;
                               color: black;    }


#black-section ::-moz-selection {  background-color: darkorchid;
    			                   color: white;  }

#black-section ::selection {  background-color: darkorchid;
  		                      color: white;   }


#red-section ::-moz-selection {  background-color: white;
    			                 color: black;  }

#red-section ::selection {  background-color: white;
  		                    color: black;   }

NOTE: The background-color , ( background ) and color are the only CSS properties than can be used with the ::selection pseudo-element. Some browsers will also render the cursor and outline properties, but since they’re not cross-browser compatible their usage is optional.

Text selection color CSS code – Overriding the default select highlight color in WordPress

Why should you even care about the CSS text highlight color override?

How to use text selection color CSS code in WordPress

Other possibilities when customizing the text selection color CSS code

More web site color customization tutorials

Featured Tutorial

More from this Category