In this section, we will learn what the user-select property is and how to use it in CSS.

CSS user-select Property Definition and Usage

The CSS `user-select` property is used to stop users from selecting a content.

Basically, if you have a text content for example and don’t want let users to select that content (perhaps because they want to copy the content etc.) you can apply this property in the target element which will stop its content from becoming highlighted if users tried to select it.

CSS user-select Property Syntax

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

CSS user-select Property Value

• auto: this value is the default one and if used, it means the text can be selected if browsers allow it.
• none: this value means no text selection is allowed.
• text: this value means the text can be selected by users.
• all: this value means the text can be selected with just one click instead of a double click.

Example: CSS disable selection

See the Pen CSS disable selection by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS user-select Property Work?

In this example, the value of the `user-select` property is set to none which means we can’t select the content in the <div> element.