How to change the text highlight color and styles | HTML, CSS Tutorial

preview_player
Показать описание
Through the use of some basic CSS rules you are able to quite easily change the text color and background color of the area selected (or highlighted) by the user.

This is done through the ::selection pseudo-element and is rather straightforward - however a slightly different syntax is required for support in Firefox.

In this video I take you through a simple example of how you can use this in your next website or web project - but be careful because it is a concern to accessibility: you will need to make sure the new styles have enough contrast to be visible by visually impaired users.

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
Рекомендации по теме
Комментарии
Автор

Great tutorial! Simple and Striaght to the point :)

kuldeepdebnath
Автор

You made my day my friend. I always wondered how to do that. And now, I feel so great about it. Like I've achieved some masterpiece.

abdullahatif
Автор

::selection {
background: pink;
color: white;
}
That's it

عبدالملك-يهي
Автор

Code:


<title>Your Text Here!</title>

<style media="screen">
::selection {
background-color: red;
color: white;

}

</style>

<body>
<h2 id="title">Your Text Here!</h2>
<body/>

darude
Автор

sir how can we apply selection psuedo element on particular tag

shubhamarora