CSS - user-select Property

Previous
Quiz

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>
Print Page
Previous
Next
Advertisements