Overriding The Default Text Selection Color With CSS

In this simple post, you will learn how to override the default text selection color with CSS.

Styling this pseudo-element is great for matching user-selected text to your site's color theme.

To have this effect or change use the ::selection selector to override the default text selection color provided by the browser.

Tutorial

copy


/*For old Firefox*/
::-moz-selection{
  color:#fff;
  background:#00796b;
}
/*code for Firefox above*/

::selection{
  color:#fff;
  background:#00796b;
}

Note::

The ::selection pseudo-element applies styles to the part of a document that has been highlighted by the user.

Tutorial Source Code.

Below is the code I wrote in the tutorial..feel free to copy and play around with it.

copy


<h1>Change Text Selection Color</h1>

<div class="container">

<div class="box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, dolorem?</p>
</div>

<div class="box" id="second">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus!</p>
</div>

</div>

CSS styles

copy

body{
  margin:0;
  padding:0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container{
 max-width: 80%;
 display: grid;
 grid-template-columns: repeat(2,1fr);
 grid-gap:20px;
}

.box{
  background-color: #eee;
  text-align: center;
  padding:10px;
  box-shadow: 2px 3px 4px gray;
}

::-moz-selection{
  color:#fff;
  background:#00796b;
}

#second ::selection{
  color:#fff;
  background:#00796b;
}