Change the text selection color using CSS.

One of the interesting features of CSS3, which we will look at today, is the name ":: selection", with which you can replace the standard color selection text in the browser. It should be noted that, at the time of writing, only Safari and Firefox support this feature, and they are displayed in completely different ways. However, in my opinion, it is worth being aware of all the new products in order to keep up with these, so to speak, “forward-going” techniques.

Let's start:
')
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

The text selection color will be red, as you might guess. You can add several paragraphs and define different selection colors for them.

[ EXAMPLE ]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}