Hi developer! Ever noticed how when you select the text, it shows up with a default blue background? Well, guess what? You can actually change that default color to something more customized. Let's dive into how we can do that!
To override the default text selection color, we can utilize the ::selection selector. This selector allows us to change the color of the selection, but only specific CSS properties can be applied to it: color, background, cursor, text-shadow, and outline.
Here's an example demonstrating how to use it:
<head>
<style>
p::selection {
color: lime;
background-color: black;
}
</style>
</head>
<body>
<p style="font-size: 30px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, recusandae.</p>
</body>
If you're working on a large project and want to change the color of everything that's selected, such as text and buttons, you can do it with the universal (*) selector.
<head>
<style>
* {
font-size: 30px;
}
*::selection {
color: lime;
background-color: black;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, recusandae.</p>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, recusandae.</div>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, recusandae.</h2>
</body>
In this way, you can change the color of the text when you select it. We hope this was helpful to you. If you have any questions or need further assistance, feel free to ask in the question box given below. Thank you!