How can you highlight a selected text range dynamically?
Highlighting Selected Text with CSS
CSS provides a pseudo-element ::selection that allows you to style the portion of text a user selects dynamically. This is useful for improving user experience, accessibility, or matching selection styles with your website's theme.
- 1
::selectiontargets text that the user highlights using mouse or keyboard. - 2
Common properties you can style include
background-color,color,text-shadow, andcursor. - 3
Not all CSS properties are supported; for example,
borderormarginwill not apply. - 4
You can use vendor prefixes (
::-moz-selection) for older browser support.
In this example, when a user selects text inside a paragraph, the background turns yellow, the text becomes black, and a subtle white text shadow adds depth. This enhances visibility and provides a customized selection effect.
- 1
Ensure sufficient contrast between selected text and background for readability.
- 2
Keep selection styles consistent with your site's color scheme and accessibility guidelines.
- 3
Avoid using overly complex styles that may distract or reduce readability.
- 4
Test selection styling across different browsers to ensure consistent behavior.
- 5
Combine
::selectionwith other text formatting techniques for enhanced UX.