Thuộc tính user-select trong CSS dùng để kiểm soát việc người dùng chọn văn bản trên trang web. Bạn có thể cho phép hoặc ngăn người dùng chọn văn bản. Ví dụ, bạn có thể tắt chọn văn bản để tránh sao chép nội dung.
Ngược lại, bạn cũng có thể đảm bảo văn bản luôn chọn được. Thuộc tính này hữu ích để kiểm soát cách người dùng tương tác với văn bản.
Lưu ý: Việc nhấp đúp vào văn bản sẽ chọn, đánh dấu văn bản đó; thuộc tính này có thể ngăn chặn điều này.
Cú pháp
Thuộc tính user-select sử dụng cú pháp sau:
user-select: auto | none | text | all;
Giá trị mặc định: auto
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
auto | Giá trị mặc định. Người dùng có thể chọn văn bản một cách bình thường. |
none | Ngăn chọn văn bản; người dùng không thể chọn bất kỳ văn bản nào. |
text | Cho phép người dùng chọn văn bản. |
all | Chọn toàn bộ văn bản chỉ bằng một cú nhấp chuột. Thay vì yêu cầu nhấp đúp chuột. |
Thuộc tính CSS user-select - Ví dụ
Dưới đây là một số ví dụ minh họa cách thuộc tính user-select hoạt động.
Ví dụ 1: Sử dụng user-select: auto
Ví dụ này sử dụng user-select: auto; văn bản bên trong thẻ div có thể chọn theo mặc định. Nó tuân theo hành vi mặc định của trình duyệt.
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:auto;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Đầu ra:
Ví dụ 2: Sử dụng user-select: none
Ví dụ này sử dụng user-select: none; ngăn người dùng chọn văn bản bên trong phần tử div.
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:none;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Đầu ra:
Ví dụ 3: Sử dụng user-select: text
Ví dụ này sử dụng thuộc tính user-select: text; đảm bảo người dùng có thể chọn văn bản trong thẻ div.
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:text;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Đầu ra:
Ví dụ 4: Sử dụng user-select: all
Ví dụ này dùng thuộc tính user-select: all; chọn toàn bộ văn bản chỉ bằng một cú nhấp chuột. Thay vì nhấp đúp chuột.
<!DOCTYPE html>
<html>
<head>
<title>user-select property</title>
<style>
div {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
h1,
h3 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>user-select:text;</h3>
<div>
GeeksforGeeks:
A computer science portal for geeks
</div>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ
Các trình duyệt được hỗ trợ bởi user-select Property được liệt kê dưới đây:
- Google Chrome
- Edge
- Firefox
- Opera
- Safari
Lưu ý: Thuộc tính user-select được hỗ trợ rộng rãi; các phiên bản cũ cần tiền tố nhà cung cấp để tương thích. Ví dụ: -webkit-, -moz-.
Kết luận
Thuộc tính user-select trong CSS là công cụ hữu ích để kiểm soát việc chọn văn bản. Sử dụng các giá trị như auto, none, text và all, nhà phát triển có thể tăng trải nghiệm người dùng. Bạn cũng có thể đảm bảo văn bản được chọn hoặc bảo vệ khi cần thiết. Hiểu và sử dụng hiệu quả thuộc tính user-select có thể cải thiện đáng kể tính tương tác và bảo mật cho nội dung web. Hãy thử nghiệm các ví dụ để xem các giá trị khác nhau tác động thế nào đến việc chọn văn bản, từ đó cải thiện kỹ năng CSS.