CSS: user-select

By Xah Lee. Date: .
xtodo

css user-select

The user-select CSS property controls whether the text within an element can be selected by the user.

It is primarily used to prevent accidental text highlighting on interactive elements like buttons or icons, thereby improving the user experience for drag-and-drop gestures and click interactions.

user-select: none;

Prevents text selection in the element and its descendants.

user-select: text;

Allows standard text selection.

user-select: all;

Allows the entire content of the element to be selected with a single click.

user-select: auto;

The default value, which resolves based on the parent element's context.

While modern browsers support the unprefixed user-select property, older implementations may require vendor prefixes like -webkit-user-select and -moz-user-select. It is important to note that user-select: none does not protect content from being copied via Developer Tools or screen readers, and overusing it on content areas can create accessibility barriers for users who rely on text selection for translation or reading aids.

AI-generated answer.