CSS Code To Change Text Selection Color

By Faruque Ahamed Mollick

Hello, guys! I am again here with another CSS tutorial. In this tutorial, I will show you how to change the text selection color using CSS.

You will see that in default the text selection background color is the blue color type. But what if it can be changed into something new? You may want something new instead of these default selection background and text color.

Yes, you can change the text selection background color and text color. I am going to show you the CSS code which can do this job for you.

The CSS code

Below is the CSS code which will change selected text’s background and text color:



/* For Mozilla base browsers */
::-moz-selection {
       background-color: #d2190c;
       color: #fff;
}

/* For safari and all the modern browsers */
::selection {
       background-color: #d2190c;
       color: #fff;
}

That’s all. Now test it on your browser and select portion of text. You will see the selected text’s background color is now like red and the text color is white. Now you can change the color so that it can fit for your web page’s theme color.

Is this not interesting? Now you don’t have to see the boring blue text selection color. You can now choose any color that you like most and match to your website theme color by modifying the above CSS code.

Below is the complete HTML file with the CSS code:

<html>
<head>
<style>
/* For Mozilla base browsers */
::-moz-selection {
       background-color: #d2190c;
       color: #fff;
}

/* For safari and all the modern browsers */
::selection {
       background-color: #d2190c;
       color: #fff;
}
</style>
</head>

<body>

<p>Select this text and you will see that the text selection background color and text color has changed. Is this not so interesting? Now modify the CSS code and choose your own colors.</p>

</body>

</html>

 

Leave a Reply

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