User select

Utilities for controlling whether the user can select text in an element


Class reference

ClassProperties
select-noneuser-select: none;
select-textuser-select: text;
select-alluser-select: all;
select-autouser-select: auto;

# Disable selecting text

Use .select-none to prevent selecting text in an element and its children.

This text is not selectable
<div class="select-none ...">
This text is not selectable
</div>

# Allow selecting text

Use .select-text to allow selecting text in an element and its children.

This text is selectable
<div class="select-text ...">
This text is selectable
</div>

# Select all text in one click

Use .select-all to automatically select all the text in an element when a user clicks.

Click anywhere in this text to select it all
<div class="select-all ...">
Click anywhere in this text to select it all
</div>

# Auto

Use .select-auto to use the default browser behavior for selecting text. Useful for undoing other classes like .select-none at different breakpoints.

This text is selectable
<div class="select-auto ...">
This text is selectable
</div>