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.
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.
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.
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 −
<html> <head> <style> .text-none { -webkit-user-select: none; user-select: none; } </style> </head> <body> <p>This text should be selectable.</p> <p class="text-none">This text cannot be selected.</p> </body> </html>
CSS user-select - auto Value
The following example demonstrates the user-select: auto property used to select the text −
<html> <head> <style> p { -webkit-user-select: auto; user-select: auto; } </style> </head> <body> <p>This text should be selectable.</p> </body> </html>
CSS user-select - text Value
The following example demonstrates the user-select: text property allows the users to select the text −
<html> <head> <style> p { -webkit-user-select: text; user-select: text; } </style> </head> <body> <p>This text should be selectable.</p> </body> </html>
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 −
<html> <head> <style> p { -webkit-user-select: all; user-select: all; } </style> </head> <body> <p>This text can be selected with a single click.</p> </body> </html>
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 −
<html> <head> <style> p { -webkit-user-select: contain; user-select: contain; } </style> </head> <body> <p>This text can be selected within the paragraph's boundaries.</p> </body> </html>
To Continue Learning Please Login
Login with Google