Disable user selection: body { user-select: none; }
user-select: none is a highly practical property in CSS that controls whether users can select text content on a webpage. By setting it to none, you can prevent users from selecting text within specific elements, which is useful in certain scenarios, such as protecting copyrighted content or enhancing user experience.
What is user-select: none?
user-select is a CSS property that controls whether text can be selected by the user. Its possible values include:
auto(default): Allows text selection.none: Prevents text selection.text: Allows text selection (even if the parent element is set tonone).all: Allows the user to select the entire content of an element with a single click (e.g., selecting an entire paragraph with one click).
When user-select: none is applied to the body, all text content on the page becomes unselectable. This is particularly useful in UI design for scenarios like game interfaces, slide presentations, or situations where copying needs to be prevented.
How to Use user-select: none
Basic Usage
body {
user-select: none;
}
This code prevents users from selecting any text on the page. To restrict selection to specific elements, you can write:
.no-select {
user-select: none;
}
Then in HTML:
<p class="no-select">This text cannot be selected.</p>
<p>This text can be selected.</p>
Browser Compatibility
user-select may require vendor prefixes in different browsers:
body {
-webkit-user-select: none; /* Safari, Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
Practical Use Cases
1. Preventing Text Copying
Some websites may want to prevent users from copying content, such as paid articles or copyrighted materials:
.article-content {
user-select: none;
}
2. Enhancing Interaction Experience
In interfaces with frequent drag-and-drop or click interactions, disabling text selection can prevent accidental actions:
.draggable-item {
user-select: none;
}
3. Game or Animation Interfaces
Game UIs typically don’t require text selection, and disabling it can avoid interference:
.game-ui {
user-select: none;
}
Considerations
1. Does Not Affect Form Inputs
user-select: none does not prevent users from selecting text in input fields (<input>, <textarea>). To disable text selection in inputs, use:
input, textarea {
user-select: none;
}
2. Does Not Fully Prevent Content Copying
While user-select: none prevents average users from selecting text with the mouse, it cannot stop developers from viewing or copying content via browser developer tools. Stronger protections may require JavaScript or other techniques.
3. May Impact Accessibility
Disabling text selection might inconvenience some users (e.g., those relying on screen readers). Therefore, weigh the pros and cons before using it.
Dynamic Control with JavaScript
You can dynamically toggle the user-select property using JavaScript:
document.body.style.userSelect = 'none'; // Disable selection
document.body.style.userSelect = 'auto'; // Enable selection
Or toggle via class names:
.disable-selection {
user-select: none;
}
document.body.classList.add('disable-selection'); // Disable selection
document.body.classList.remove('disable-selection'); // Enable selection
Combining with Other CSS Properties
1. With cursor
Modify the cursor style for non-selectable elements to provide visual feedback:
.no-select {
user-select: none;
cursor: not-allowed;
}
2. With pointer-events
To completely disable interaction, combine with pointer-events:
.no-interaction {
user-select: none;
pointer-events: none;
}
Example: Creating a Non-Selectable Card
Here’s a complete example of a non-selectable card:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
width: 200px;
padding: 20px;
background: #f0f0f0;
border-radius: 8px;
user-select: none;
}
</style>
</head>
<body>
<div class="card">
<h3>Non-Selectable Card</h3>
<p>This text cannot be selected with the mouse.</p>
</div>
</body>
</html>
Advanced Usage: Allowing Partial Selection
Even if a parent element has user-select: none, child elements can still allow selection with user-select: text:
.parent {
user-select: none;
}
.child {
user-select: text;
}
<div class="parent">
<p>This text cannot be selected.</p>
<p class="child">This text can be selected.</p>
</div>
Performance Impact
The performance impact of user-select: none is negligible, but in extreme cases (e.g., thousands of elements with this property), it might slightly increase rendering overhead.
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
