Sử Dụng CSS để Xử Lý Bôi Chọn Văn Bản - Viblo
Bài đăng này đã không được cập nhật trong 4 năm
CSS cho phép việc xử lý việc bôi chọn văn bản trên trang web. Bằng cách này chúng ta có thể ứng dụng để làm một số tính năng hữu ích cũng như làm cho trải nghiệm người dùng được tốt hơn.
Chọn tất cả
Một ứng dụng cho chức năng chọn tất cả thường gặp là khi có một đoạn văn bản mà muốn cho người dùng copy nhanh hoặc là một đoạn code, thay vì phải bôi đen đoạn đó thì chúng ta có thể xử lý để cho người dùng chỉ cần ấn vào là có thể bôi chọn hết.
div { -webkit-user-select: all; /* for Safari */ user-select: all; }Nhưng cách này có thể gây khó chịu khi người dùng chỉ muốn copy một phần nhỏ văn bản trong đó. Nghĩa là người dùng không thể bôi chọn một phần nhất định vì mỗi khi chọn vào phần từ div trên thì đều bị bôi chọn tất cả. Để khắc phục chúng ta sử dụng tabindex để có thể kết hợp animation người dùng focus vào.
<div tabindex="0">make awesome things that better</div> div { -webkit-user-select: all; user-select: all; } div:focus { animation: select 100ms step-end forwards; } @keyframes select { to { -webkit-user-select: text; user-select: text; } }Loại bỏ bôi chọn
Đôi khi chúng ta gặp vấn đề về trải nghiệm người dùng khi có một button được ấn liên tục thì nó sẽ gây khó chịu khi vô tình lựa chọn đoạn text đó. Để xử lý vấn đề này chúng ta có thể làm như sau:
button { -webkit-user-select: none; user-select: none; }Style bôi chọn
Ngoài ra chúng ta cũng có thể sử dụng CSS để định dạng cho đoạn văn bản được bôi chọn bằng ::selection selector
p::selection { background-color: yellow; }Trên đây là một vài cách xử lý ít ỏi, mọi người có thể tìm hiểu thêm Selection API. Cảm ơn mọi người đã dành thời gian đọc bài viết
CSSAll rights reserved
Từ khóa » Bôi Css
-
TOP 10 Thuốc Bôi Chống Xuất Tinh Sớm Tốt Nhất (2022)
-
Cách Sử Dụng Gel Bôi Trơn Giúp Tăng Khoái Cảm Khi Quan Hệ Tình Dục
-
Cách Sử Dụng Gel Bôi Trơn Chống Xuất Tinh Sớm Mượt Mà Và Trơn Chu
-
Gel Bôi Trơn Trong Quan Hệ Tình Dục Có ăn được Không? - Vinmec
-
Gel Bôi Trơn Là Gì? Có Nên Dùng Gel Bôi Trơn Khi Quan Hệ Không?
-
Tác Hại Không Ngờ Của Gel Bôi Trơn âm đạo
-
Có Thể Dùng Vaseline để Bôi Trơn Khi Quan Hệ Không? - Suckhoe123
-
[CẢNH BÁO] Có Nên Dùng Gel Bôi Trơn Cho Nữ Trong Những Cuộc Yêu?
-
Tác Hại Của Gel Bôi Trơn âm đạo ít Ai Ngờ Tới
-
Dùng Gel Bôi Trơn Chống Xuất Tinh Sớm Có Gây Hại Không? - VCEP
-
Thuốc, Gel Bôi Nào Làm Co, Teo Rụng Búi Trĩ? | Hỏi đáp Bệnh Trĩ
-
Gel Bôi Trơn Nên Mua ở Hiệu Thuốc Hay Shop Online?
-
Cô Gái Trẻ “cháy” Mặt Vì Bôi Dưỡng Chất Trị Nám Và Trứng Cá
-
Quản Lý Viêm Da Cơ địa ở Trẻ Em
-
Sử Dụng Thuốc Bôi Ngoài Da Có Chứa Corticoid