user-select

Các tiện ích để kiểm soát xem người dùng có thể chọn văn bản trong một phần tử hay không.

Class Styles

select-none

user-select: none;

select-text

user-select: text;

select-all

user-select: all;

select-auto

user-select: auto;

Ví dụ

Sử dụng tiện ích select-none để ngăn chọn văn bản trong một phần tử và các con của nó:

Thử chọn văn bản để thấy hành vi mong đợi

The quick brown fox jumps over the lazy dog.

<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>

Sử dụng tiện ích select-text để cho phép chọn văn bản trong một phần tử và các con của nó:

Thử chọn văn bản để thấy hành vi mong đợi

The quick brown fox jumps over the lazy dog.

<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>

Sử dụng tiện ích select-all để tự động chọn tất cả văn bản trong một phần tử khi người dùng nhấp vào:

Thử nhấp vào văn bản để thấy hành vi mong đợi

The quick brown fox jumps over the lazy dog.

<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>

Sử dụng tiện ích select-auto để sử dụng hành vi trình duyệt mặc định cho việc chọn văn bản:

Thử chọn văn bản để thấy hành vi mong đợi

The quick brown fox jumps over the lazy dog.

<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>

Prefix an user-select utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="select-none md:select-all ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.