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)

» How To Create A Stacked Gallery Using HTML And CSS Source Code

» Overriding The Default Text Selection Color With CSS

» Learn how to create a custom scrollbar with CSS.

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

» Animated Social Media Icons Using Font Awesome and Materialize CSS

collections_bookmark Category :: Css
date_range Published :: 1 year ago At: 12:59 AM
event_note Detailed Date :: Jun 21st, 2020
person Writer :: Code
  • RECENT POSTS
3 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.


4 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.


4 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.


4 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.


4 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.


6 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?


8 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).


11 months ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share