Definition
The user-select property controls the ability in which a user can select text within an HTML element.
You’ll need to prefix user-select with -webkit- for it to work on Safari and Safari on iOS. This chart on Caniuse tracks that limitation and also shows all of the browser that support the property.
And, when you don’t prefix user-select, you can see from this CodePen that the text is still able to be selected on Safari.
user-select values
Let’s dive into what each of these properties actually does.
// Removes the ability to select text.
// The CSS cursor will likely change to pointer.
user-select: none;
// Default value, the browser will likely determine the selectability.
user-select: auto;
// Only text can be selected.
user-select: text;
// You can only select text from within an element.
// You won't be able to select all with certain combinations of this.
user-select: contain;
// Allow selecting all of the text by clicking once into a parent element.
user-select: all;