Thuộc tính user-select trong CSS
Bùi Tấn Lực - 916
- 01/10/2025
Chức năng của Thuộc tính user-select trong CSS
Thuộc tính user-select trong CSS dùng để cài đặt không cho phép hoặc cho phép bôi chọn văn bản trên một phần tử HTML, thường bôi chọn để copy, ngoài ra còn có thể cài đặt khi click vào phần tử thì sẽ bôi chọn được tất cả văn bản trên phần tử HTML đó.
Cú pháp của Thuộc tính user-select trong CSS
user-select: giatri;
giatri: Giá trị để cài đặt không cho phép hoặc cho phép bôi chọn văn bản trên một phần tử HTML (Ví dụ: none, all, text)
Các giá trị của Thuộc tính user-select trong CSS
none: Không cho phép bôi chọn văn bản (Thường để copy hay làm gì khác)
all: Click vào là bôi chọn được tất cả văn bản trong phần tử HTML đó.
text: Cho phép bôi chọn văn bản trên phần tử HTML đó.
Code Thuộc tính user-select trong CSS
user-select: none; Không cho phép bôi chọn để copy hay làm gì khác
user-select: all; Click vào để chọn tất cả văn bản
user-select: text; Cho phép bôi chọn văn bản
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính user-select trong CSS</title>
<style>
p{background:#000;color:#fff;padding:10px}
#none{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
#all{
-webkit-user-select: all; /* Safari */
-ms-user-select: all; /* IE 10 and IE 11 */
user-select: all; /* Standard syntax */
}
#text{
-webkit-user-select: text; /* Safari */
-ms-user-select: text; /* IE 10 and IE 11 */
user-select: text; /* Standard syntax */
}
</style>
</head>
<body>
<h1>Code Thuộc tính user-select trong CSS</h1>
<span>Dùng để cài đặt không cho phép hoặc cho phép bôi chọn văn bản trên một phần tử HTML, thường bôi chọn để copy, ngoài ra còn có thể cài đặt khi click vào phần tử thì sẽ bôi chọn được tất cả văn bản trên phần tử HTML đó:</span>
<p id="none">user-select: none; Không cho phép bôi chọn để copy hay làm gì khác</p>
<p id="all">user-select: all; Click vào để chọn tất cả văn bản</p>
<p id="text">user-select: text; Cho phép bôi chọn văn bản</p>
</body>
</html>
Cách sử dụng user-select trong CSS hiệu quả
Thuộc tính user-select nên được sử dụng dựa trên mục đích tương tác của từng khu vực trên trang. Việc kiểm soát khả năng chọn văn bản hợp lý có thể giúp giao diện dễ thao tác hơn, nhưng không nên lạm dụng để ngăn người dùng sao chép nội dung thông thường.
Khi nào nên dùng user-select: none?
user-select: none phù hợp với những thành phần mà việc bôi đen nội dung không mang lại giá trị, chẳng hạn như nút bấm, biểu tượng điều khiển, nhãn kéo thả hoặc các khu vực thao tác trực tiếp.
.button {
user-select: none;
}
Trong trường hợp này, người dùng vẫn có thể nhấp hoặc tương tác với nút bình thường nhưng sẽ không vô tình tạo vùng chọn văn bản khi thao tác liên tục. Cách dùng này đặc biệt hữu ích trên giao diện có nhiều thao tác bằng chuột hoặc cảm ứng.
Khi nào nên giữ khả năng chọn văn bản?
Với nội dung bài viết, tiêu đề, hướng dẫn, thông báo hoặc đoạn mã, nên duy trì khả năng chọn văn bản để người dùng có thể sao chép và sử dụng thông tin khi cần.
Không nên đặt user-select: none cho toàn bộ trang chỉ với mục đích hạn chế sao chép. Điều này có thể làm giảm trải nghiệm đọc, gây khó khăn khi tra cứu và khiến người dùng không thể chọn một phần nội dung để tìm kiếm hoặc lưu lại.
Kết hợp user-select với các phần tử tương tác
Trong giao diện thực tế, có thể áp dụng user-select riêng cho từng nhóm thành phần thay vì thiết lập chung cho toàn bộ website. Ví dụ, phần điều khiển có thể không cho chọn văn bản, trong khi khu vực nội dung vẫn giữ hành vi mặc định.
.control {
user-select: none;
}
.content {
user-select: text;
}
Cách phân chia này giúp trải nghiệm tương tác và khả năng đọc nội dung không ảnh hưởng lẫn nhau. Với website có cả nội dung văn bản và nhiều thành phần điều khiển, đây thường là cách triển khai hợp lý hơn so với việc vô hiệu hóa thao tác chọn văn bản trên toàn trang.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính user-select trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
