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
.