fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
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;
}


Related Post(s)

» Learn how to create Gradient Backgrounds using CSS

» Learn how to create an overlay effect with CSS

» Learn how to use CSS box shadow property - Source Code

» How to use the CSS Negation and Language Selectors.

» How to create a Fullscreen Background Video(Source Code)

collections_bookmark Category :: Css
date_range Published :: 2 weeks ago At: 12:59 AM
event_note Detailed Date :: Jun 21st, 2020
person Writer :: Code

YOU MAY LIKE THESE POSTS

share