To customize selected text appearance on a webpage, use the ::selection pseudo-element. It allows styling of highlighted text with properties like color and background. For example, ::selection { background-color: #ff9900; color: #fff; } changes selected text to orange with white text. You can also target specific elements such as paragraphs using p::selection. However, browser compatibility varies, especially in older or mobile browsers, so test across platforms and avoid relying on it for critical UI. Use subtle styles to enhance design without distracting users, and note that ::selection does not inherit styles from parents—define them explicitly. Avoid complex backgrounds, font style changes, and overly bright colors for better usability.

When you want to customize how selected text looks on a webpage, the ::selection pseudo-element is your go-to tool. It lets you change the appearance of text when users highlight it with their cursor—something most people don’t even realize can be styled.

Basic Syntax and Usage

Using ::selection is pretty straightforward. You define it in your CSS like any other selector, but it only applies to the part of the text that’s currently selected.

Here’s a simple example:

::selection {
  background-color: #ff9900;
  color: #fff;
}

This will make any selected text have an orange background and white text color. Keep in mind that ::selection only supports a limited set of properties—mainly color, background, cursor, and a few others related to text appearance.

You can also target specific elements instead of applying it globally:

p::selection {
  background-color: yellow;
}

Now only text inside <p></p> tags will show a yellow highlight when selected.

Browser Compatibility and Fallbacks

One thing to watch out for is browser support. While most modern browsers support ::selection, older ones might not. Also, some mobile browsers may behave differently or ignore custom styles entirely.

To cover more bases:

• Always test across different browsers.
• Use standard syntax without prefixes unless targeting very old versions.
• Don’t rely solely on ::selection for critical UI cues—it should enhance, not replace, default behavior.

Another gotcha: if you're using SCSS or other preprocessors, nesting ::selection might cause issues. It's safer to keep it at the top level or use mixins designed for pseudo-elements.

Styling Tips and Common Mistakes

Avoid overdoing it. The goal is to improve readability or match your design theme—not distract users. A subtle change often works best.

Some things to avoid:

• Very bright or clashing colors
• Overly complex backgrounds (gradients aren’t supported anyway)
• Changing font styles mid-selection (won’t work reliably)

Also, remember that ::selection doesn't inherit from parent styles by default. So if you style a container, its children won’t automatically follow unless explicitly told.

If you’re going for consistency across your site, consider setting a global ::selection style early in your stylesheet and tweak it per component as needed.

That’s basically all there is to it. It’s a small feature, but one that can add a nice polish to your site when used thoughtfully.

The above is the detailed content of How to use the ::selection pseudo-element to style selected text?. For more information, please follow other related articles on the PHP Chinese website!