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>
Advertisements