CssHow-ToBeginner · 3 min read

How to Make Text Not Selectable in CSS: Simple Guide

To make text not selectable in CSS, use the user-select property and set it to none. This prevents users from highlighting or copying the text on the page.

📐

Syntax

The CSS property user-select controls whether the user can select text. Setting it to none disables text selection. You can use vendor prefixes for better browser support.

user-select: none; — disables text selection.
-webkit-user-select: none; — for Safari and older Chrome versions.
-moz-user-select: none; — for Firefox.
-ms-user-select: none; — for Internet Explorer and Edge (legacy).

css

p {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+/Edge */
  user-select: none;         /* Standard syntax */
}

💻

Example

This example shows a paragraph where the text cannot be selected by dragging the mouse or using keyboard shortcuts.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Non-selectable Text Example</title>
<style>
p.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 1.2rem;
  padding: 1rem;
  border: 1px solid #ccc;
  max-width: 400px;
}
</style>
</head>
<body>
<p class="no-select">Try to select this text. You will see that it cannot be highlighted or copied.</p>
</body>
</html>

Output

A webpage showing a bordered paragraph with text that cannot be highlighted or selected by the user.

⚠️

Common Pitfalls

Some common mistakes when trying to disable text selection include:

Not using vendor prefixes, which can cause the property to not work in some browsers.
Applying user-select: none; to the wrong element, so the text remains selectable.
Expecting this to prevent all copying methods; users can still copy text from the page source or developer tools.

css

/* Wrong: Missing prefixes, may fail in some browsers */
p {
  user-select: none;
}

/* Correct: Include prefixes for better support */
p {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

📊

Quick Reference

Use this quick reference to remember how to disable text selection in CSS:

Property	Purpose
-webkit-user-select: none;	Disable selection in Safari and Chrome (older versions)
-moz-user-select: none;	Disable selection in Firefox
-ms-user-select: none;	Disable selection in IE10+ and Edge (legacy)
user-select: none;	Standard property to disable text selection

✅

Key Takeaways

Use user-select: none; to make text not selectable in CSS.

Include vendor prefixes for better browser compatibility.

Apply the property to the exact element containing the text you want to protect.

This method prevents selection but does not fully stop copying from source code.

Test in different browsers to ensure consistent behavior.