Introduction

Disabling text selection is usually done to improve interaction on drag handles, buttons, icon bars, or game-like UI elements where accidental selection feels broken. The standard solution is CSS user-select: none, applied narrowly so that you do not damage accessibility or make real content harder to use.

Use CSS user-select

The main property is user-select. Setting it to none tells the browser not to allow normal text selection on the targeted element.

1.no-select {
2  -webkit-user-select: none;
3  -ms-user-select: none;
4  user-select: none;
5}

Then apply it only where needed:

<button class="no-select">Drag me</button>
<div class="no-select">Toolbar label</div>

Modern browsers support the standard property well, but the vendor-prefixed form is still commonly included for compatibility with older engines.

Scope Matters

A common mistake is applying user-select: none to the entire body. That prevents users from copying text, selecting code examples, or using built-in browser behavior on content where selection is actually useful.

A better approach is to disable selection only on elements that behave like controls. Good candidates include:

• drag handles
• custom buttons
• canvas overlays
• resize grips
• game UI panels

If the text is instructional, readable, or likely to be copied, leave selection enabled.

Re-Enable Selection in Child Elements

Sometimes a parent container should block selection, but a specific child should remain selectable. You can override the rule on the child.

1.panel {
2  user-select: none;
3}
4
5.panel code {
6  user-select: text;
7}

This is useful in complex components that mix controls with copyable content.

JavaScript Fallbacks and Event Blocking

You may also see JavaScript solutions such as canceling the selectstart event.

document.querySelector(".drag-surface").addEventListener("selectstart", event => {
  event.preventDefault();
});

This can work, but CSS is usually the better default because it is simpler, declarative, and easier to override in specific contexts. JavaScript event blocking is more appropriate when the behavior must change dynamically during drag interactions.

Touch and Drag Interactions

Disabling text selection is especially useful on touch devices and pointer-heavy widgets where accidental long-press selection looks like a broken drag interaction. Examples include sortable lists, canvas tools, and custom sliders. In those cases, preventing selection can make the UI feel more native because the pointer interaction is treated like manipulation rather than reading.

That said, selection and drag behavior are not identical browser features. If the component also has gesture problems, you may need additional CSS or event handling for touch behavior. user-select: none solves the selection part only, which is why it should be viewed as one piece of interaction polish rather than a universal drag fix.

Accessibility and UX Considerations

Not being able to select text can frustrate users. Many people expect to copy error messages, account IDs, or instructions from a page. Preventing selection everywhere can make the interface feel hostile.

A reasonable design rule is:

• disable selection on controls
• keep it enabled on content
• use JavaScript only when CSS alone is not enough

That approach protects the interaction you care about without breaking basic browser expectations.

Common Pitfalls

• Applying user-select: none to the entire page often causes more UX harm than benefit. Limit it to genuinely interactive elements.
• Assuming JavaScript is required adds unnecessary complexity. CSS solves most text-selection cases by itself.
• Forgetting to re-enable selection for nested content such as code blocks or labels can make important text impossible to copy. Override with user-select: text where needed.
• Treating text-selection prevention as a security measure is incorrect. It only changes browser interaction, not data access.
• Ignoring accessibility expectations can make the UI feel broken to users who rely on normal browser selection behavior. Disable selection only when it clearly supports the interaction model.

Summary

• The standard way to disable text selection is CSS user-select: none.
• Apply it narrowly to controls and drag surfaces, not to the entire page by default.
• Child elements can override the parent with user-select: text.
• JavaScript event blocking is optional and mainly useful for dynamic interaction states.
• Good UX comes from preventing accidental selection without blocking legitimate content use.