Overriding The Default Text Selection Color With CSS

Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon

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;
}