CSS user-select property
The user-select property in CSS controls the user's ability to select text within an element. It allows you to specify whether the text in an element can be selected by the user, which can be useful for preventing text selection in certain areas of your web page.
Syntax
element { user-select: value; }
Values
auto:- Description: The default behavior, which allows text selection based on the browser's default behavior.
- Usage: Text can be selected as usual.
- Example:
user-select: auto;
none:- Description: Prevents the user from selecting text in the element.
- Usage: Useful for elements where text selection is not desired, such as buttons or interactive elements where selection is unnecessary.
- Example:
user-select: none;
text:- Description: Allows text to be selected (this is often the default for text-containing elements).
- Usage: Explicitly specifies that text can be selected.
- Example:
user-select: text;
all:- Description: Allows the entire text content of an element to be selected, usually including when the element is clicked.
- Usage: Useful for ensuring that all text in an element can be selected at once.
- Example:
user-select: all;
Examples
Example 1: Preventing Text Selection
<!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>
.no-select {
user-select: none;
}
</style>
</head>
<body>
<p class="no-select">You cannot select this text.</p>
</body>
</html>
- This example applies the
user-select: none;property to a paragraph, preventing users from selecting the text within it.
Example 2: Allowing Text Selection
<!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>
.text-select {
user-select: text;
}
</style>
</head>
<body>
<p class="text-select">You can select this text.</p>
</body>
</html>
- This example uses
user-select: text;to explicitly allow text selection, which is the default behavior for most text elements.
Example 3: Selecting All Text
<!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>
.select-all {
user-select: all;
}
</style>
</head>
<body>
<p class="select-all">Click here to select all the text in this paragraph.</p>
</body>
</html>
- This example allows the entire text content of the paragraph to be selected at once, typically when the text is clicked.
Browser Support
The user-select property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in Internet Explorer 10 and above. Vendor prefixes like -webkit-, -moz-, and -ms- may be required for compatibility with older browser versions.
Use Cases
- Preventing Selection: Use
user-select: none;to prevent users from selecting text in elements like buttons, headers, or interactive components where text selection is not needed. - Ensuring Selection: Use
user-select: text;oruser-select: all;to explicitly control the selection behavior of text elements, enhancing user experience and accessibility. - Custom Styling: Combine with other CSS properties to create custom styling effects for selected or non-selected text.