The user-select property is used to define how text selection should happen.
We can set two values to change the text selection property:
none – Disables the text selectionall – 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.