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

» 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

Category :: Css
Published :: 1 year ago At: 12:59 AM
Detailed Date :: Jun 21^st, 2020
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

Overriding The Default Text Selection Color With CSS

Tutorial

Note::

Tutorial Source Code.

CSS styles

Related Post(s)