Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
user-select
communitycreator

What is the user-select property in CSS?

Programming Bytes

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

RELATED TAGS

css
user-select
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring