How to Change Default Text Selection Color Using CSS
Table of Contents
Every time a user selects a text to highlight, it automatically takes some background color and sometimes changes the color of the text, too. If you haven’t noticed it before, select this sentence to see the background color beyond the text.
If the default blue color bothers you or for any reason, maybe related to your website design, you need to change the highlight color, CSS3 gives that opportunity!
The ::selection pseudo-element is one of the cool features of CSS3, which overrides the browser-level or system-level text highlight color and makes it possible to specify the color and background for texts users select.
You can change the color or background color of some specific elements or your whole website.
But the actual properties that can be used with this pseudo selector are very limited. Essentially, with the help of the ::selection pseudo-element the values of only 3 properties, such as color, background-color and text-shadow, can be changed. In this article, we are going to show the effect on each of these properties.
How to Change Font Color while Highlighting a Text
To change the color of an element, just style the element with the ::selection pseudo-element.
Example of changing the element color with ::selection:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.green::-moz-selection {
color: #8ebf42;
}
.green::selection {
color: #8ebf42;
}
.purple::-moz-selection {
color: #b30cb3;
}
.purple::selection {
color: #b30cb3;
}
.orange::-moz-selection {
color: #ffa500;
}
.orange::selection {
color: #ffa500;
}
.lightblue::-moz-selection {
color: #add8e6;
}
.lightblue::selection {
color: #add8e6;
}
</style>
</head>
<body>
<p class="green">
Select this text to see the green font color.
</p>
<p class="orange">
Select this text to see the orange font color.
</p>
<p class="purple">
Select this text to see the purple font color.
</p>
<p class="lightblue">
Select this text to see the lightblue font color.
</p>
</body>
</html>Result
Select this text to see the green font color.
Select this text to see the orange font color.
Select this text to see the purple font color.
Select this text to see the lightblue font color.
How to Change Background Color while Highlighting a Text
To change the background color while highlighting a text, just style the element with the ::selection and set your preferred color for the background-color property.
Example of changing the background color with ::selection:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.green::-moz-selection {
background-color: #8ebf42;
}
.green::selection {
background-color: #8ebf42;
}
.yellow::-moz-selection {
background-color: #ffcc00;
}
.yellow::selection {
background-color: #ffcc00;
}
</style>
</head>
<body>
<p>This is a text with the default selection background-color.</p>
<p class="green">Select this text to see a green background.</p>
<p class="yellow">Select this text to see a yellow background.</p>
</body>
</html>How to Change Text Shadow Color while Selecting a Text
Go further with the ::selection pseudo-element and add, remove or change even the type of text-shadow effects on selection.
You just need to specify the text-shadow property for the ::selection pseudo-element.
Example of changing the text shadow types:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* before selection */
.shadow2 {
text-shadow: 1px 1px 1px;
}
.shadow3 {
text-shadow: 1px 2px 4px #000;
}
.shadow4 {
text-shadow: 1px 2px 4px;
}
/* after selection */
.shadow1::-moz-selection {
text-shadow: 1px 1px 1px;
background-color: transparent;
}
.shadow1::selection {
text-shadow: 1px 1px 1px;
background-color: transparent;
}
#shadow2::-moz-selection {
text-shadow: none;
background: #fffae6;
}
.shadow2::selection {
text-shadow: none;
background: #fffae6;
}
.shadow3::-moz-selection {
text-shadow: 1px 1px 2px #222;
}
.shadow3::selection {
text-shadow: 1px 1px 2px #222;
}
.shadow4::-moz-selection {
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
.shadow4::selection {
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
</style>
</head>
<body>
<p class="shadow1">Select this text to get the text shadow.</p>
<p class="shadow2">Select this text to remove the text shadow.</p>
<p class="shadow3">Select this text to make the text clearer.</p>
<p class="shadow4">Select this text to change color of text shadow.</p>
</body>
</html>How to Change Textarea and Input Fields Color while Selecting a Text
It is also possible to change the text selection color for <textarea> and <input> fields.
Example of changing the text selection color for <textarea> and <input>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input::-moz-selection {
color: #1c87c9;
background-color: #eee;
}
input::selection {
color: #1c87c9;
background-color: #eee;
}
textarea::-moz-selection {
color: white;
background-color: #8ebf42;
}
textarea::selection {
color: white;
background-color: #8ebf42;
}
</style>
</head>
<body>
<p>Input element</p>
<form>
<input type="text" value="Select this input text" />
</form>
<p>Textarea element</p>
<textarea rows="5" cols="25">Select this textarea text</textarea>
</body>
</html>How to Change Image Select Color
Change the color of selection of an image with the help of the ::selection pseudo-element. See the given example for having a clear understanding.
Example of changing the image selection color with ::selection:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
padding: 10px;
}
#img2::-moz-selection {
background-color: #d9d9d9;
}
#img2::selection {
background-color: #d9d9d9;
}
</style>
</head>
<body>
<p>Here the selection color for the second image is set to gray.</p>
<p>Select both images to see the difference.</p>
<img id="img1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
<img id="img2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</body>
</html>How to Have Different Selection Effects on the Same Elements in One Page
Let’s imagine that you have four paragraphs, and you want to have specific selection colors for each of them.
What you need to do is to change the selection color for different paragraphs or different sections of the page with different classes.
Example of changing the selection color for different paragraphs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.green::selection {
background: #8ebf42;
}
p.green::-moz-selection {
background: #8ebf42;
}
p.blue::selection {
background: #1c87c9;
}
p.blue::-moz-selection {
background: #1c87c9;
}
p.yellow::selection {
background: #ffcc00;
}
p.yellow::-moz-selection {
background: #ffcc00;
}
p.red::selection {
background: #ff6666;
}
p.red::-moz-selection {
background: #ff6666;
}
</style>
</head>
<body>
<p class="green">Select the text to see the green highlight color.</p>
<p class="blue">Select the text to see the blue highlight color.</p>
<p class="yellow">Select the text to see the yellow highlight color.</p>
<p class="red">Select the text to see the red highlight color.</p>
</body>
</html>How to Apply Selection Effects to the Whole Page
Applying the highlight effects to a particular element can be a waste of time if you want to have the same effect on the whole page of your website. Using the ::selection pseudo-element, you can set the selection color for the entire page without applying it with certain elements.
Example of setting the selection color for the entire page:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
::-moz-selection {
color: #fff;
background-color: #8ebf42;
}
::selection {
color: #fff;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h3>Select multiple elements on this page and see that the selection color is set to white, and the background color is set to green for the entire page.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. I</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</body>
</html>Styling your web page with this pseudo-element following your site's color scheme (instead of using the dull blue background selection color) can give an attractive look to your website. For some specific portion of your site, you can choose a selected background color or apply different background colors for each part. Changing the default selection properties can always lead to a better view and therefore a better user experience.