# user-select property

The `user-select` property controls the selection behavior of a text and other elements on a page.

## Syntax

`selector { user-select: none | contain | all | auto | text; }`

## Values

Value | Description
--- | ---
`none` | Text is not selected.
`contain` | A selection started inside an element will not extend beyond that element.
`all` | If a double click occurs on a nested element, all contents of the parent with that property value will be selected.
`auto` | The calculated value is automatically determined as follows: for `after` and `before` pseudo-elements the value is `none`, for an edited element the value is `contain` if the element's parent has the `all` or `none` value - the element itself will have the same, otherwise the value will be `text`.
`text` | The user can select text in an element.

Default value: `text`.

## Comment

Some values ​​may not work in all browsers.

## Example . The none value

The following text cannot be selected:

`<div id="elem"> Lorem ipsum dolor sit amet. </div>` `#elem { user-select: none; }`

:

## See also

- the `selection` pseudo-element
  that controls styles of a selected text
- the `pointer-events` property
  that removes a response to the mouse

← →
↑
en ru