Back to blog

How to Disable Text Selection Highlighting Using CSS

When building interactive web applications, developers strive to make web components look and feel like native mobile or desktop applications.

However, a common web browser default behavior can break this aesthetic: when a user rapidly double-clicks a button, navigates a carousel controller, or drags a custom slider, the browser automatically highlights the surrounding text in blue.

This unintended text selection looks unpolished.

In this guide, we will analyze the CSS user-select property, configure cross-browser vendor prefix compatibilities, and explore UX guidelines for disabling text highlights.

The Solution: The user-select Property

CSS includes a dedicated property named user-select that controls how users interact with text selection on a webpage.

To disable text highlighting on a specific button class, set the value to none:

.btn-no-select {
  user-select: none;
}

Understanding the Key Values of user-select

  • none: The text inside the element and its sub-elements cannot be selected by double-clicking or dragging.
  • auto (Default): Follows the browser default selection rules (typically allows text highlight).
  • text: Explicitly allows selection. This is useful for enabling text highlight inside a child container located within a parent that has user-select: none active.
  • all: A single click on the element selects the entire block of text automatically (excellent for API tokens, ssh keys, or code copy blocks).

Cross-Browser Compatibility Prefix Setup

While modern browsers support the standard user-select property natively, legacy installations (and specific webkit environments like older iOS Safari browsers) require vendor prefixes to operate correctly.

To ensure your styling rules apply across all browsers, configure your CSS class as follows:

.interactive-component {
  -webkit-touch-callout: none; /* iOS Safari link popup block */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Modern Standard (Chrome, Opera, Edge) */
}

UX Best Practice: Avoid Global Select Blocks

A common mistake made by developers is applying user-select: none globally to the entire body of a website to prevent content theft:

/* WARNING: BAD UX PRACTICE */
body {
  user-select: none;
}

Avoid this configuration. It creates a frustrating user experience:

  • Users cannot copy snippets of code, error messages, or documentation references.
  • It does not stop content thieves (who can read your raw page source code using browser DevTools anyway).
  • It breaks accessibility workflows for screen translators and accessibility reading accessories.

Only apply user-select: none to specific UI elements that users click repeatedly, such as:

  • Accordion navigation header panels.
  • Carousel prev/next arrow controls.
  • Interactive calculators and tab switches.
  • Drag-and-drop file upload wrappers.

Conclusion

Disabling text selection highlighting improves the native look and feel of custom web components. By applying the user-select: none property to interactive controls, configuring vendor prefixes for legacy Safari compatibility, and avoiding global selection blocks on read-only article bodies, you create a responsive, developer-friendly website.