user-select

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Thuộc tính user-select của CSS kiểm soát liệu người dùng có thể chọn văn bản hay không. Điều này không có tác dụng đối với nội dung được tải như một phần của giao diện người dùng trình duyệt (chrome), ngoại trừ trong các hộp văn bản.

Try it

user-select: none;

user-select: text;

user-select: all;

<section id="default-example">
  <p id="example-element">Thử chọn văn bản này</p>
</section>

#example-element {
  font-size: 1.5rem;
}

Cú pháp

css

/* Giá trị từ khóa */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;

/* Giá trị toàn cục */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

Note: user-select không phải là thuộc tính kế thừa, mặc dù giá trị ban đầu auto làm cho nó hoạt động như thể nó được kế thừa hầu hết thời gian. Các trình duyệt dựa trên WebKit/Chromium có triển khai thuộc tính này như là được kế thừa, điều này vi phạm hành vi được mô tả trong đặc tả, và điều này sẽ gây ra một số vấn đề. Cho đến nay, Chromium đã chọn sửa các vấn đề để làm cho hành vi cuối cùng đáp ứng các đặc tả.

Giá trị

none

Văn bản của phần tử và các phần tử con của nó không thể chọn được. Lưu ý rằng đối tượng Selection có thể chứa các phần tử này.

auto

Giá trị được dùng của auto được xác định như sau:

Trên các phần tử giả ::before và ::after, giá trị được dùng là none
Nếu giá trị được dùng của user-select trên phần tử cha là none, giá trị được dùng là none
Ngược lại, nếu giá trị được dùng của user-select trên phần tử cha là all, giá trị được dùng là all
Ngược lại, giá trị được dùng là text

text

Văn bản có thể được người dùng chọn.

all

Nội dung của phần tử sẽ được chọn nguyên tử: Nếu một vùng chọn sẽ chứa một phần của phần tử, thì vùng chọn phải chứa toàn bộ phần tử bao gồm tất cả các phần tử con của nó. Nếu nhấp đúp hoặc nhấp chuột phải xảy ra trong các phần tử con, phần tử tổ tiên cao nhất có giá trị này sẽ được chọn.

Note: Module CSS basic user interface xác định giá trị contain cho thuộc tính user-select để cho phép vùng chọn bắt đầu trong phần tử được giới hạn bởi ranh giới của phần tử đó, tuy nhiên điều này không được hỗ trợ trong bất kỳ trình duyệt nào.

Định nghĩa chính thức

Initial value	`auto`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Cú pháp chính thức

user-select = 
  auto     |
  text     |
  none     |
  contain  |
  all

Ví dụ

HTML

html

<p>Bạn có thể chọn văn bản này.</p>
<p class="unselectable">Này, bạn không thể chọn văn bản này!</p>
<p class="all">Nhấp một lần sẽ chọn tất cả văn bản này.</p>

CSS

css

.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}

Kết quả

Thông số kỹ thuật

Specification
CSS Basic User Interface Module Level 4 # content-selection

Khả năng tương thích trình duyệt

Xem thêm

::selection phần tử giả
Đối tượng JavaScript Selection

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content