Change Text Selection Color Using CSS3 ::selection Selector

In this tutorial i will tell you how you can Change Text selection color using CSS3 ::selection Selector.Using the ::selection selector you can change the selected text color.This can be used for many reasons.You can use it for a unique design of your website.
Change Text Selection Color Using CSS3 selection Selector

View Demo

The ::selection selector matches the portion of an element that is selected by a user.Only a few CSS properties can be applied to the ::selection selector:

  • color
  • background
  • cursor
  • outline

Use of ::selection Selector

This example will change the selected text color to red and background to yellow.

::-moz-selection { /* For Firefox */
    color: red;
    background: yellow;
}

::selection { /* For webkit browsers */
    color: red; 
    background: yellow;
}

Use can use different color for different section.

.blue::-moz-selection { /* For Firefox */
    color: white;
    background: blue;
}

.blue::selection { /* For webkit browsers */
    color: white; 
    background: blue;
}.

and here is the html example:

<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis lectus, consequat suscipit faucibus et, ultrices nec nisi. In molestie mollis ligula sed posuere. Etiam ac ligula magna, vel lacinia tortor. In quis bibendum nisi. Nullam imperdiet metus eget dui adipiscing tempor. Pellentesque dapibus nulla id neque congue consectetur. Vivamus semper porttitor nunc, at tristique libero vestibulum vitae.</p>

View Demo

Please don’t forget to share this article and subscribe us to get the latest updates via email.

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *