Hello Readers!

Browsers have a default text selection color (mainly, blue or orange). However, this setting can be overrided with the CSS  pseudo-element ::selection. This overrides the browser-level text selection color with a color of our choosing. It is definitely one of the "forward-enhancement" techniques we have today. It is a pleasure for those using modern browsers.

Note that, the double colon is strictly necessary in the syntax for this pseudo element particularly. Although other pseudo elements accept a single colon in syntax.

Only Safari and Firefox are the two browsers supporting this, and that too in different ways.

Using this pseudo element is great, especially when  you want to match the user-selected text to your site's color scheme.

There are three properties that ::selection works with:

• color
• background-color
• text-shadow

If you try a property other than these, that property will be ignored.

Use it as follows.

1.  Mozilla based browsers

::-moz-selection { 
    background-color: red; 
    color: #000; 
}

    2. Safari

::selection {
    background: red;
    color: #000;
}

Here is a sample code.

HTML :

<p>Select me to see normal behavior.</p>
<p class='example-color'>Try selecting me for a different text color.</p>
<p class='example-background-color'>You can select me for a different background color.</p>
<p class='example-background'>You can also select me for a different background.</p>
<p class='example-both'>Guess what&hellip; you can select me for a different background color and text color.</p>
<p class='example-shadow'>How about a text-shadow? Sure, select me for a different text-shadow.</p>

CSS :

.example-color::selection {
  color: #8e44ad;
}
.example-background-color::selection {
  background-color: #f1c40f;
}
.example-background::selection {
  background: #e74c3c;
}
.example-both::selection {
  background-color: #8e44ad;
  color: white;
}
.example-shadow::selection {
  text-shadow: 1px 1px 0 #27ae60;
}

body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  line-height: 1.45;
  background: #E0DCCC;
  color: #333;
  padding: 1em;
  font-size: 18px;
}

p  {
  margin-bottom: 1em;
}

Try it and see the output for yourself.