How to Make Text Unselectable on a Web Page

Understanding the CSS user-select Property

The CSS user-select property provides developers with control over text selection behavior on web pages. Originally a non-standard property, it is now covered by the CSS Basic User Interface Module Level 4 specification, providing a formal standard for controlling how users interact with text content MDN Web Docs.

This property is not inherited by default, though the initial auto value makes it behave as inherited in most practical scenarios. It applies to all HTML elements and can be configured to prevent accidental text selection in interactive UI components where such behavior would improve the user experience CSS-Tricks.

The key to using this property effectively lies in understanding when preventing selection genuinely serves the user versus when it merely imposes an unnecessary restriction. Legitimate use cases include icon buttons, navigation menus, draggable elements, and toolbars--contexts where text selection would interfere with intended interactions rather than support user goals.

For web development projects that require careful consideration of user interaction patterns, our web development services team specializes in implementing user-centered interfaces that balance functionality with accessibility. Before implementing user-select: none, consider whether the restriction solves a real user problem or prevents a behavior users actually want. User-centered design principles suggest preserving choice whenever possible and applying selection restrictions only where they demonstrably improve the interaction.

Property Values Explained

Understanding the different values of the user-select property is essential for choosing the right behavior for each use case. Each value serves a specific purpose and understanding their behaviors helps prevent unintended selection restrictions.

none

The none value prevents text selection entirely within the affected element. When applied, users cannot select text using mouse drag, keyboard shortcuts like Shift+Arrow, or other selection methods. However, this does not prevent programmatic access through the Selection API. This is the most commonly used value for preventing accidental selection in UI components. Implementing this correctly is a fundamental skill in front-end development that affects user experience across your entire application.

auto

The auto value computes based on context, making it the initial default for most elements. It behaves as none if the parent's computed value is none, as all if the parent's computed value is all, and as text otherwise. This intelligent cascading behavior makes auto the most practical choice when you want selection to work normally but respect parent restrictions MDN Web Docs.

text

The text value allows normal text selection behavior, representing standard user expectations for content interactions. Use this value when you want to explicitly enable selection in contexts where it might otherwise be restricted by inheritance or parent element rules.

all

The all value selects content atomically--if any part of the element would be selected, the entire element including all descendants gets selected. A double-click or context-click in a child element selects the entire parent. This is particularly useful for elements like confirmation codes, serial numbers, or promo codes that users typically want to copy entirely in one action.

contain

The contain value restricts selection to stay within the element bounds, preventing selection from extending outside the element. Browser support for this value is limited, so it should be used with fallback strategies or avoided in projects requiring broad compatibility MDN Web Docs.

Best Practices for User-Centered Design

Implementing the user-select property effectively requires balancing functional requirements with user experience and accessibility needs. These best practices help ensure your implementation serves users rather than restricting them unnecessarily.

Apply Selectively

Rather than applying user-select: none globally across the entire page, target specific elements where selection conflicts actually occur. This selective approach preserves user choice while addressing legitimate interaction issues:

/* Good: Targeted application to specific components */
.button-text,
.icon-button,
.nav-item,
.toolbar-button {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* Avoid: Global application */
html {
 user-select: none; /* User-hostile, rarely justified */
}

For teams building complex interactive applications, our AI automation services can help streamline user interactions while maintaining accessibility compliance.

Consider the User's Perspective

Before implementing unselectable text, ask yourself these critical questions: Does this genuinely prevent user frustration from accidental selections, or does it prevent a behavior the user actually wants to perform? Are there alternative approaches that preserve user choice while still solving the underlying problem? Will this impact accessibility for users who rely on text selection with reading tools or assistive technology?

Alternative Approaches to Consider

In many cases, alternative design solutions can achieve similar goals without restricting selection:

• Improved visual design: Clear visual boundaries between interactive and non-interactive elements using borders, background colors, or spacing reduce accidental selections
• Better spacing: Adequate padding and margins prevent selection overlaps and make click targets clearer
• Cursor management: CSS cursor property with values like pointer or grab indicates interactive elements without restricting functionality
• Content strategy: If users frequently copy certain content, make it easier to copy through dedicated copy buttons rather than harder to select

State-Based Application

For draggable elements, consider applying the restriction only during the active state rather than permanently:

[draggable]:active {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

This pattern prevents selection conflicts during drag operations while preserving normal text selection behavior at all other times CSS-Tricks.