The user-select CSS property is used to control whether the user can select the content of an element or not. It specifies whether the text of an element can be selected by the user, and if so, what type of selection is allowed.
The user-select property can take several values, including auto, none, text, all, and contain. Let’s explore each of these values in more detail:
auto
The default value for the user-select property is auto. This value allows the user to select the content of the element. The user can select text by dragging the mouse cursor over the text, or by using the keyboard.
none
The none value disables text selection for the element. This means that the user cannot select any text within the element. This value is often used to disable text selection for user interface elements such as buttons and icons.
css
.element {
user-select: none;
}
text
The text value allows the user to select only the text content of an element. This means that any other content within the element, such as images and icons, cannot be selected.
css
.element {
user-select: text;
}
all
The all value allows the user to select all content within an element, including images and icons. This value is often used for user interface elements that require the selection of all content within the element.
css
.element {
user-select: all;
}
contain
The contain value specifies that the user can only select text that is contained within the element. This means that if the element contains child elements with text, the user can only select the text within those child elements and not the text of the parent element.
css
.element {
user-select: contain;
}
It’s important to note that the user-select property does not disable copying of content through other means, such as keyboard shortcuts or context menus.
In addition to these values, there are also vendor-specific prefixes for the user-select property, such as -webkit-user-select and -moz-user-select. These prefixes are used to provide support for older browsers.
In conclusion, the user-select property is a useful tool for controlling the selection of text within an element. By using this property, you can disable or enable text selection, or allow selection of specific types of content within an element.