In this post, we will learn how to change text selection color with CSS. When we select a text on the webpage, we see the text color white and the background color of the text blue which is by default colors. So how we can change text selection color, we will learn in this post.


How To Change Text Selection Color With CSS ?


Change Text Selection Color

To change text selection color, we use  ::selection  CSS selector. For Mozilla Firefox we use  ::-moz-selection  CSS selector. With this help of selector, we can easily change the text selection color. This selector is not supported in Internet Explorer 8 and earlier versions.


Copy-paste this code into your code editor and check it out.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Change Text Selection Color With CSS ?</title>
<style>

/* For Mozilla Firefox */
::-moz-selection {
color: #fff;
background: #000;
}

::selection {
color: #fff;
background: #000;
}

</style>
</head>
<body>

<h1>CodexRadar</h1>

<p>This is an example text. This is an example text. This is an example text. This is an example text. This is an example text. </p>

</body>
</html> code-box



Summary

In this post we learned how to change text selection color with CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post