How to Change the Default Text Selection Color with CSS

Table of Contents

  1. How to Change the Font Color while Highlighting a Text
  2. How to Change the Background Color while Highlighting a Text
  3. How to Change the Text Shadow Color while Selecting a Text
  4. How to Change the Textarea and Input Fields Color while Selecting a Text
  5. How to Change Image Select Color
  6. How to Have Different Selection Effects on the Same Elements in One Page
  7. How to Apply Selection Effects to the Entire Page

Every time a user selects a text to highlight it automatically takes some background color and sometimes changes the color of the text, too. If you haven’t noticed it before, select this sentence to see the background color beyond the text.

If the default blue color bothers you or for any reason, maybe related to your website design, you need to change the highlight color, CSS3 gives that opportunity!

The ::selection pseudo-element is one of the cool features of CSS3 which overrides the browser-level or system-level text highlight color and makes it possible to specify the color and background for texts users select.

You can change the color or background color of some specific elements or your whole website.

But the actual properties that can be used with this pseudo selector are very limited. Essentially, with the help of the ::selection pseudo-element the values of only 3 properties, such as color, background-color and text-shadow, can be changed. In this article, we are going to show the effect on each of these properties.

For browser compatibility, use the -moz- property extension to get support from Firefox (::-moz-selection).

How to Change the Font Color while Highlighting a Text

In order to change the color of an element, just style the element with the ::selection pseudo-element. You can change the color of just the font or the font along with the background on selection.

Example of changing the element color with ::selection:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .green::-moz-selection{
      color: #8ebf42;
      }
      .green::selection{
      color: #8ebf42;
      background-color: initial;
      }
      .bg-green::-moz-selection{
      background-color: #8ebf42;
      }
      .bg-green::selection{
      background-color: #8ebf42;
      }
      .bg-transparent::-moz-selection{
      color: #8ebf42;
      background-color: transparent;
      }
      .bg-transparent::selection{
      color: #8ebf42;
      background-color: transparent;
      }
      .white-green::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      .white-green::selection{
      color: #fff;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p class="green">Select this text to see the green font color with its default background.</p>
    <p class="bg-green">Select this text to see the default font color with green background.</p>
    <p class="bg-transparent">Select this text to see the green font color with no background color.</p>
    <p class="white-green">Select this text to see the white font color with green background color.</p>
  </body>
</html>

Remember that in the given example the default background color is the color of this individual site.

How to Change the Background Color while Highlighting a Text

Same goes here for the background color. Just style the element with the ::selection and set your preferred color for the background-color property.

Example of changing the background color with ::selection:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .green::-moz-selection{
      background-color: #8ebf42;
      }
      .green::selection{
      background-color: #8ebf42;
      }
      .yellow::-moz-selection{
      background-color: #ffcc00;
      }
      .yellow::selection{
      background-color: #ffcc00;
      }
    </style>
  </head>
  <body>
    <p>This is a text with the default selection background-color.</p>
    <p class="green">Select this text to see a green background.</p>
    <p class="yellow">Select this text to see a yellow background.</p>
  </body>
</html>

In the case you don't want any background color on selection, just set the the "transparent" value of the background-color property.

How to Change the Text Shadow Color while Selecting a Text

Go further with the ::selection pseudo-element and add, remove or change even the type of text shadow effects on selection.

You just need to specify the text-shadow property for the ::selection pseudo-element.

Example of changing the text shadow types:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* before selection */
      .shadow2{
      text-shadow: 1px 1px 1px;
      }
      .shadow3{
      text-shadow: 1px 2px 4px #000;
      }
      .shadow4{
      text-shadow: 1px 2px 4px;
      }
      /* after selection */
      .shadow1::-moz-selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      .shadow1::selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      #shadow2::-moz-selection{
      text-shadow: none;
      background: #fffae6;
      }
      .shadow2::selection{
      text-shadow: none;
      background: #fffae6;
      }
      .shadow3::-moz-selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow3::selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow4::-moz-selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
      .shadow4::selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
    </style>
  </head>
  <body>
    <p class="shadow1">Select this text to get the text shadow.</p>
    <p class="shadow2">Select this text to remove the text shadow.</p>
    <p class="shadow3">Select this text to make the text clearer.</p>
    <p class="shadow4">Select this text to change color of text shadow.</p>
  </body>
</html>

How to Change the Textarea and Input Fields Color while Selecting a Text

It is also possible to change the text selection color for <textarea> and <input> fields. See the following example with the ::selection pseudo-element with the textarea and input elements.

Example of changing the text selection color for <textarea> and <input>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input::-moz-selection{
      color: #1c87c9;
      background-color: #eee;
      }
      input::selection{
      color: #1c87c9;
      background-color: #eee;
      }
      textarea::-moz-selection{
      color: white;
      background-color: #8ebf42;
      }
      textarea::selection{
      color: white;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Input element</p>
    <form><input type="text" value="Select this input text" /></form>
    <p>Textarea element</p>
    <textarea rows="5" cols="25">Select this textarea text</textarea>
  </body>
</html>

How to Change Image Select Color

Change the color of selection of an image with the help of the ::selection pseudo-element. See the given example for having a clear understanding.

Example of changing the image selection color with ::selection:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      padding: 10px;
      }
      #img2::-moz-selection{
      background-color: #d9d9d9;
      }
      #img2::selection{
      background-color: #d9d9d9;
      }
    </style>
  </head>
  <body>
    <p>Here the selection color for the second image is set to gray.</p>
    <p>Select both images to see the difference.</p>
    <img id="img1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <img id="img2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>

How to Have Different Selection Effects on the Same Elements in One Page

Let’s imagine that you have four paragraphs and you want to have specific selection colors for each of them.

What you need to do is to change the selection color for different paragraphs or different sections of the page with different classes.

Example of changing the selection color for different paragraphs:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.green::selection {
      background: #8ebf42;
      }
      p.green::-moz-selection {
      background: #8ebf42;
      }
      p.blue::selection {
      background: #1c87c9;
      }
      p.blue::-moz-selection {
      background: #1c87c9;
      }
      p.yellow::selection {
      background: #ffcc00;
      }
      p.yellow::-moz-selection {
      background: #ffcc00;
      }
      p.red::selection {
      background: #ff6666;
      }
      p.red::-moz-selection {
      background: #ff6666;
      }
    </style>
  </head>
  <body>
    <p class="green">Select the text to see the green highlight color.</p>
    <p class="blue">Select the text to see the blue highlight color.</p>
    <p class="yellow">Select the text to see the yellow highlight color.</p>
    <p class="red">Select the text to see the red highlight color.</p>
  </body>
</html>

Even when the style block is doing the same thing, the selectors cannot be combined. It will not work if you combine them, because browsers ignore the entire selector if there is a part of it they don't understand or it is invalid.

How to Apply Selection Effects to the Entire Page

Applying the highlight effects to a particular element can be a waste of time if you want to have the same effect on the whole page of your website. Using the ::selection pseudo-element you can set the selection color for the entire page without applying it with certain elements.

Example of setting the selection color for the entire page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      ::selection{
      color: #fff;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Select multiple elements on this page and see that the selection color is set to white, and the background color is set to green for the entire page.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>

The ::selection declaration has a wide browser support. The compatibility issue with Firefox is fixed with the help of -moz- prefix before the selector. Talking about tablet or mobile devices, this selector is still not supported by iOS Safari and Opera Mini.

It is not recommended to rely on non - standardized CSS features, as there is a higher risk that a web browser may, at any time, without notice, remove support for an unofficial CSS selector or pseudo-element. Consider them therefore strictly as a non-essential addition to the overall experience of your visitors and be prepared to "break" at any time.

Styling your web page with this pseudo-element following your site's color scheme (instead of using the dull blue background selection color) can give an attractive look to your website. For some specific portion of your site, you can choose a selected background color or apply different background colors for each part. Changing the default selection properties, however, you like, can always lead to a better view and therefore a better user experience.


Do you find this helpful?

Related articles