CSS user-select Property

CSS user-select property allows you to control whether the user can select the text or not. Try to select the text in the below example:

You can select this text.

You can not select this text.

Click once and this text will be selected automatically.

Example:

p{
  user-select: none; /* Standard syntax */
  -ms-user-select: none; /* IE 10 and IE 11 */
  -webkit-user-select: none; /* Safari */
}

Use user-select: all; to select the text in one click instead of double clicking on it.

Example:

p{
  user-select: all; /* Standard syntax */
  -ms-user-select: all; /* IE 10 and 11 */
  -webkit-user-select: all; /* Safari */
}

CSS Syntax

The user-select property has the following syntax:

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

Property Values

The user-select property accepts the following values:

autoSpecifies that user can select the text. This is the default value.
noneSelection is not allowed.
textUser can select the text.
allSelection can be done with a single click.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.userSelect= “all”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment