Custom CSS Text Selection Color

Customising CSS text selection on a website can give the site some personality. CSS makes it easy to change the appearance of selected text so it can be part of the overall visual identity of the site. In this article we’ll get into how to change the colour of selected text and its background and some examples.

Applications of Customized Text Selection

Customizing text selection has several practical applications:

1. Branding: Changing the selection colour to match the brand colour scheme means everything on the site is consistent and thought out which strengthens the visual identity.
2. Improving Accessibility: Changing selection colours can improve readability for users with visual impairments by choosing colours that contrast better with the rest of the content.
3. Enhancing User Interface (UI): Even small UI changes like eye friendly selection colours can make a big difference to the overall user experience.

How to change Text Selection Color?

With CSS we can change the appearance of selected text using the ::selection and ::-moz-selection pseudo-elements. Here’s an example:

/* ---------------------------------------------------------- */
/*               Snippflow Custom Text Selection              */
/* ---------------------------------------------------------- */

/* Styling for Firefox */
::-moz-selection {
  color: #fff;
  background: #46a787;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Optional */
}

/* Styling for other browsers */
::selection {
  color: #fff;
  background: #46a787;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Optional */
}

Applying CSS Text Selection Color to Specific Elements

The selection styling can also be applied to specific elements on the page, like headers or elements with a specific class.

/* ---------------------------------------------------------- */
/*                Snippflow Custom Text Selection             */
/* ---------------------------------------------------------- */

/* Styling for elements with the .custom-class */
.custom-class::selection {
  color: #fff;
  background: #46a787;
}

.custom-class::-moz-selection {
  color: #fff;
  background: #46a787;
}

/* Styling for h1 headers */
h1::selection {
  color: #fff;
  background: #46a787;
}

h1::-moz-selection {
  color: #fff;
  background: #46a787;
}

Explanation of the Code

• ::-moz-selection: This is a special pseudo-element that works in Firefox, you can change the styling of selected text.
• ::selection: This pseudo-element works in most other modern browsers like Chrome, Safari, Edge and Opera.

See also

• Custom Select Arrow using CSS
• Custom Link Styles Based on File Type
• Custom Mouse Cursor Using External Image
• Using the currentColor property to change SVG color
• Utilizing min(), max(), and clamp() in CSS