CSS does not allow selection

In web development, we often want to prevent users from selecting certain elements on the page with the mouse or keyboard. This can avoid unnecessary trouble or improve the user experience. CSS provides a very simple way to prevent users from selecting text or other elements on the page, which is controlled by the user-select attribute. In this article, we will discuss in detail how to use CSS to achieve the effect of not allowing selection.

The user-select Property

The user-select property, introduced in CSS3, controls whether users can select text on a page. It has the following values:

auto: The default value, indicating that the user can select text.
none: Indicates that the user cannot select text.
text: Indicates that the user can select text, but not child elements within the element.

Preventing Text from Being Selected

If we want to prevent text on a page from being selected, we can use the following CSS code:

.prevent-select {
user-select: none;
}

In the code above, we define a class name .prevent-select and set the user-select attribute to none. This prevents the element with this class name and the text within it from being selected.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Prevent text selection</title> 
<style> 
.prevent-select { 
user-select: none; 
} 
</style> 
</head> 
<body> 
<p class="prevent-select">This text cannot be selected.</p> 
</body> 
</html>

The effect is as follows:

This text cannot be selected.

Prevent an element from being selected

In addition to preventing text from being selected, sometimes we also want to prevent an element from being selected. You can use the same method by setting the user-select attribute to none, as shown below:

.prevent-select-element { 
user-select: none; 
}

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Prevent element selection</title> 
<style> 
.prevent-select-element { 
user-select: none; 
} 
</style> 
</head> 
<body> 
<div class="prevent-select-element"> 
<p>This element cannot be selected.</p> 
</div> 
</body> 
</html>

The effect is as follows:

This element cannot be selected.

Only allow part of the text to be selected

Sometimes, we want some text on a page to be selectable while others are not. This can be achieved by using the text value of the user-select attribute. For example, in the following code only Selectable text can be selected:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Allow partial text selection</title> 
<style> 
.partial-select { 
user-select: text; 
} 
.prevent-select { 
user-select: none; 
} 
</style> 
</head> 
<body> 
<p class="partial-select">Selectable text</p> 
<p class="prevent-select">Unselectable text</p> 
</body> 
</html>

The effect is as follows:

Selectable text

Unselectable text

Notes

user-select attribute is not supported by all browsers, especially older ones. Please be aware of compatibility issues when using it.
While preventing text from being selected can improve the user experience, it can sometimes affect web accessibility. In actual use, you should make a trade-off based on the specific situation.
To prevent elements from being selected or to make part of text unselectable, you can combine the user-select attribute with other CSS properties to achieve richer effects.

Through this article, I believe you have learned how to use CSS to prevent users from selecting text or elements on a page. In actual development, flexibly applying these techniques as needed can effectively improve the user experience of your pages.