CssConceptBeginner · 3 min read

What is user-select in CSS: Control Text Selection

user-select is a CSS property that controls whether users can select text on a webpage. It lets you enable or disable text selection to improve user interaction or protect content.

⚙️

How It Works

The user-select property controls if and how users can highlight text on a webpage. Imagine text like a sticky note: sometimes you want to let people pick it up and move it (select text), and sometimes you want it fixed so they can't grab it.

When you set user-select to none, it’s like putting a clear cover over the text that stops users from selecting it. Other values like auto or text allow normal selection behavior. This helps control user interaction with text, especially in buttons, menus, or protected content.

💻

Example

This example shows two paragraphs: one where text can be selected and one where selection is disabled using user-select: none.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Select Example</title>
<style>
  .selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10px;
    border: 1px solid #f00;
    background-color: #fee;
  }
</style>
</head>
<body>
  <p class="selectable">You can select this text normally.</p>
  <p class="no-select">You cannot select this text because user-select is set to none.</p>
</body>
</html>

Output

Two paragraphs displayed: the first with normal black border and selectable text, the second with red border and light red background where text selection is disabled.

🎯

When to Use

Use user-select when you want to control how users interact with text on your site. For example:

Disable text selection on buttons or clickable elements to avoid accidental highlights.
Prevent users from copying protected content or UI labels.
Improve user experience by stopping unwanted text selection during drag or click actions.

However, avoid disabling selection on large text blocks or articles, as users often want to copy or highlight important information.

✅

Key Points

user-select controls text selection ability.
Common values: auto, text, none, all.
Helps improve UI by preventing accidental text highlights.
Should be used thoughtfully to not frustrate users.

✅

Key Takeaways

user-select controls whether users can highlight text on a webpage.

Setting user-select: none disables text selection for that element.

Use it to improve UI by preventing unwanted text highlights on buttons or controls.

Avoid disabling selection on content users may want to copy or read carefully.

It works in all modern browsers with consistent behavior.