CSS - user-select Property

CSS user-select property determines whether text can be selected by the user, with no effect on content loaded as part of a browser’s user interface (chrome) other than textboxes.

While user-select is not inherited, its initial “auto” value often makes it behave as if it is inherited. WebKit/Chromium-based browsers implement the property as inherited, which violates the specification and will cause problems. Chromium has been resolving these problems to align with the specified behavior.

Possible Values

• none − The element’s and sub-elements’ text is not selectable, but these elements may be present in the Selection object.

none − The element’s and sub-elements’ text is not selectable, but these elements may be present in the Selection object.

• auto − The auto value is determined as follows: The value used for the ::before and ::after pseudo-elements is none . For editable elements, the used value is contain . If the parent of this element has a user-select value all , then the used value is all . If the parent of this element has a user-select value none , then the used value is none . The used value is text.

auto − The auto value is determined as follows:

• The value used for the ::before and ::after pseudo-elements is none .

The value used for the ::before and ::after pseudo-elements is none .

• For editable elements, the used value is contain .

For editable elements, the used value is contain .

• If the parent of this element has a user-select value all , then the used value is all .

If the parent of this element has a user-select value all , then the used value is all .

• If the parent of this element has a user-select value none , then the used value is none .

If the parent of this element has a user-select value none , then the used value is none .

• The used value is text.

The used value is text.

• text − The user can select the text.

text − The user can select the text.

• contain − Allows the selection to begin within the element, but contains the selection to the boundaries of that element.

contain − Allows the selection to begin within the element, but contains the selection to the boundaries of that element.

• all − The content of the element must be selected atomically: If a selection contains part of an element, it must also include all of its descendants. If a double-click or context-click happens in a sub-element, the highest ancestor with this value will be chosen.

all − The content of the element must be selected atomically: If a selection contains part of an element, it must also include all of its descendants. If a double-click or context-click happens in a sub-element, the highest ancestor with this value will be chosen.

Applies To

All elements.

Syntax

user-select: none | auto | text | contain | all;

CSS user-select - none Value

The following example demonstrates the user-select: none property preventing users from selecting the text −

CSS user-select - auto Value

The following example demonstrates the user-select: auto property used to select the text −

CSS user-select - text Value

The following example demonstrates the user-select: text property allows the users to select the text −

CSS user-select - all Value

The following example demonstrates the user-select: all property allows the users to select the text within a single click −

CSS user-select - contain Value

The following example demonstrates the user-select: contain property allows the users to select the text within the paragraph’s boundaries −