What is the user-select property in CSS?

The user-select property is used to define how text selection should happen.

We can set two values to change the text selection property:

  1. none – Disables the text selection
  2. all – Selects all the content of the element with a single click.
  • If the parent’s user-select is set to all and the child doesn’t have user-select, then all contents are selected when clicking the child or parent.

  • If the parent’s user-select is set to none and the child doesn’t have user-select, then the child contents cannot be selected.

  • If the child’s user-select is set to all and the parent doesn’t have user-select, then the parent will not click on the child.

  • If the child’s user-select is set to none and the parent’s user-select is set to all, then the child will not click the parent.


If an element doesn’t have a user-select property, the default value is set to auto. The auto property means:

  • For the ::before and ::after pseudo-elements, the value of user-select is none.

  • For the editable elements, like input textarea, the user-select value is contained.

  • The user-select property of the parent is used.

  • Other than this, the user-select value is text.

Free Resources