MoreLesson 257Free preview

Text Selection Color

This lesson is part of How To · All levels

Summary

The highlighted text color can be changed with a pseudo-element::selection. You usually set the color and background so that the highlights stay in contrast to the design. Not all CSS properties apply to the::selection, and settings must maintain readability.

Key points

::selection targets the text selected by the user.
Commonly supported properties are color, background-color, and text-shadow.
Make sure the text color and the background contrast are sufficient.
Don't completely eliminate the highlights because the user needs to see what they've chosen.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.