How to Disable Text Selection Highlighting in CSS

By the end of this page, you will understand how text selection works in the browser, how to disable it for UI-like elements using CSS, when to use the user-select property, and what trade-offs to consider for usability and accessibility.

Browsers allow users to select text by default. This is useful for reading, copying, and interacting with content. However, some elements are styled to behave more like controls than readable text—for example:

• tab labels
• navigation pills
• toolbar actions
• links styled as buttons

In those cases, accidental text selection can feel awkward. A common CSS solution is the user-select property.

.button-like {
  user-select: none;
}

This tells the browser that the text inside the element should not be selectable by the user.

Why this matters

In real interfaces, users often click and drag slightly. If a button label gets highlighted during that interaction, the UI can feel less polished. Disabling selection on control-like elements can improve the interaction experience.

Is it standard?

Yes. user-select is the standard CSS property used for this purpose. Historically, browsers required vendor-prefixed versions such as:

• -webkit-user-select
• -moz-user-select
• -ms-user-select

In practice, many codebases still include prefixes for broader compatibility.

Important caveat

Do not disable selection on normal content just for aesthetics. Users often need to:

• copy text
• select part of a paragraph while reading
• use accessibility tools

A good rule is:

• disable selection for controls
• allow selection for content

Think of selectable text like text printed on paper that a user can drag a highlighter over.

For regular paragraphs, that is helpful because the user may want to mark or copy something.

For a button label, the text is more like the word printed on a physical elevator button. You press it, but you do not expect to highlight the letters on it.

user-select: none tells the browser: treat this text more like a control label than a document passage.

The core CSS syntax is:

.element {
  user-select: none;
}

For broader browser support, many developers write:

.element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Example: links styled as tabs

<nav>
  <a href="#questions" class="tab-button">Questions</a>
  <a href="#tags" class="tab-button">Tags</a>
  <a href="#users" class="tab-button">Users</a>
</nav>

.tab-button {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #222;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Now the links still work as links, but their text is much less likely to become highlighted during interaction.

Example: allow selection again in child content

If a parent disables selection, you can re-enable it for a child:

.toolbar {
  user-select: none;
}

.toolbar code {
  user-select: text;
}

This is useful when most of an area behaves like UI, but one part should still be copyable.

Consider this example:

<a href="#" class="action-link">Save</a>

.action-link {
  -webkit-user-select: none;
  user-select: none;
}

What happens step by step:

1. The browser renders the anchor text Save.
2. By default, anchor text can usually be selected like other text.
3. The CSS rule applies to .action-link.
4. The browser sees user-select: none.
5. When the user clicks and drags across the text, the browser avoids creating a text selection for that element.
6. The anchor still remains clickable and focusable unless other CSS or JavaScript changes that behavior.

Small trace example

<p>Selectable paragraph</p>
<a href="#" class="button-link">Click Me</a>

.button-link {
  user-select: none;
}

Result:

• The paragraph text can still be highlighted.
• The link text cannot be easily highlighted by dragging.
• The link still behaves as a normal anchor unless its default action is changed elsewhere.

Disabling text selection is useful in UI elements that act like controls rather than content.

Common examples

• Tabs: Overview, Settings, Billing
• Button-like links: Save, Edit, Delete
• Sidebar navigation items: labels in menus
• Toolbar actions: icon-and-text controls
• Drag handles: labels that should not highlight during dragging
• Game or app-like interfaces: where fast clicking and dragging is common

Example scenarios

• In a dashboard, users rapidly click navigation items. Preventing accidental text selection makes the UI feel smoother.
• In a custom file manager, toolbar labels should behave like controls, not text content.
• In a tabbed component, dragging across tab labels should switch focus or do nothing—not highlight the label text.

In real projects, developers usually apply user-select: none narrowly, not globally.

Common pattern: utility class

Many codebases create a reusable class:

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Then apply it only where needed:

<a href="#" class="tab no-select">Profile</a>
<button class="no-select">Save</button>

Common pattern: component-level styling

In component-based apps, the rule is often placed directly in the component styles:

.sidebar-item,
.tab,
.toolbar-button {
  user-select: none;
}

Best-practice usage

• Use it for controls, tabs, and draggable UI parts.
• Avoid using it on article text, form labels users may copy, or code snippets.
• Keep the behavior local to the component.

Related pattern: drag interactions

When implementing drag-and-drop, developers often disable selection on draggable elements to prevent ugly text highlighting while dragging.

Accessibility note

If something is truly a button, consider using a real <button> element instead of an <a> when no navigation occurs. Semantic HTML matters more than styling alone.

1. Disabling selection everywhere

Broken approach:

* {
  user-select: none;
}

Why it is a problem:

• users cannot copy text
• it harms usability
• it can frustrate accessibility workflows

Better:

.tab,
.button-like {
  user-select: none;
}

2. Using an anchor when a button is more appropriate

Broken approach:

<a href="#" onclick="saveData()">Save</a>

If the element performs an action instead of navigation, prefer:

<button type="button">Save</button>

This improves semantics and accessibility.

3. Relying only on old vendor-prefixed properties

Older code:

.element {
  -moz-user-select: none;
}

Better:

.element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

4. Assuming user-select: none disables clicking

It does not. It only affects text selection.

.link {
  user-select: none;
}

The link is still clickable.

5. Preventing selection when users may need to copy the text

For example, disabling selection on:

• error messages
• coupon codes
• API keys
• code snippets

In those cases, users often need to select and copy the text.

user-select values

Anchor vs button

/* Standard */
.element {
  user-select: none;
}

/* Wider compatibility */
.element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Use user-select: none for

• tabs
• button-like links
• toolbar buttons
• drag handles
• navigation items

Avoid it for

• paragraphs
• articles
• code snippets
• API keys
• messages users may need to copy

Useful values

• none — prevent selection
• text — allow selection
• auto — default browser behavior
• all — select all content at once

Best practice

• apply it only to UI controls
• prefer semantic <button> for actions
• include vendor prefixes if supporting older browsers

Is there a standard CSS way to disable text selection?

Yes. The standard property is user-select.

Should I use JavaScript to prevent text highlighting?

Usually no. CSS is simpler and cleaner for this case. JavaScript is only needed for special interaction logic.

Does user-select: none stop clicks or keyboard focus?

No. It only affects text selection. The element can still be clicked and focused normally.

Can I use user-select: none on links styled as buttons?

Yes. That is a common use case, especially for tabs or navigation controls.

Should I disable text selection on all buttons?

Often yes for custom UI controls, but use judgment. Do not disable selection where users may need to copy text.

Is -moz-user-select enough?

No. It is an older vendor-prefixed version. Prefer the standard user-select property, optionally with prefixes for compatibility.

Should I use <a> or <button> for a button-like control?

Use <a> for navigation and <button> for actions. Styling does not change the element’s semantic purpose.

• CSS pseudo-elements — useful when customizing selection styles with ::selection.
• Semantic HTML — helps decide when to use <a> versus <button>.
• Accessibility — important when changing default interaction behavior.
• Pointer events — sometimes confused with user-select, but they control mouse interaction, not text selection.
• Drag and drop interactions — often related because dragging can trigger accidental text selection.
• Focus states — UI controls that disable selection still need proper keyboard focus styling.