EN
CSS - style selected text
0
points
In this article, we would like to show you how to style selected text using CSS.
Quick solution:
.class-name::selection {
background: yellow;
}
Practical example
In this example, we present how to use pseudo element to customize selected text of each class. ::selection
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.yellow-selection::selection {
background: yellow;
color: red;
}
.green-selection::selection {
background: lightgreen;
color: yellow;
}
</style>
</head>
<body>
<div class="yellow-selection">Select this text to see styled selection.</div>
<div class="green-selection">Select this text to see styled selection.</div>
</body>
</html>