:: lựa chọn - Thủ thuật CSS

Sử dụng con trỏ của bạn để chọn câu này. Chú ý làm thế nào khi bạn chọn văn bản, một màu nền sẽ lấp đầy khoảng trống? Bạn có thể thay đổi màu nền và màu của văn bản đã chọn bằng cách tạo kiểu ::selection. Tạo kiểu cho phần tử giả này là một cách tuyệt vời để khớp văn bản do người dùng chọn với bảng màu trang web của bạn.

p::-moz-selection ( color: red) p::selection ( color: red; )

Hãy lưu ý rằng dấu hai chấm là cần thiết trong cú pháp cho phần tử giả này, mặc dù các phần tử giả khác chấp nhận dấu hai chấm đơn.

Như đã thấy ở trên, bạn có thể tạo kiểu ::selectiontrên các yếu tố riêng lẻ. Bạn cũng có thể tạo kiểu cho toàn bộ trang bằng cách bỏ phần tử giả trần trong biểu định kiểu của mình.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Chỉ có ba thuộc tính ::selectionsẽ hoạt động với:

color
background( background-color, background-image)
text-shadow

Xem bài kiểm tra lựa chọn Pen :: của Chris Coyier (@chriscoyier) trên CodePen.

Nếu bạn cố gắng tạo kiểu ::selectionvới một thuộc tính không có trong danh sách, thì thuộc tính đó sẽ bị bỏ qua. Có thể khó nhìn thấy backgroundtrong danh sách đó vì thuộc tính sẽ chỉ hiển thị màu khi được sử dụng ::selectionvà nó sẽ không hiển thị hình nền hoặc gradient.

Cũng đừng thử điều này:

p::-moz-selection, p::selection ( color: red; )

Khi các trình duyệt tìm thấy một phần của lựa chọn mà họ không hiểu, họ sẽ bỏ toàn bộ nội dung đó, vì vậy điều này sẽ luôn thất bại.

Một trong những cách sử dụng hữu ích nhất ::selectionlà tắt a text-shadowtrong khi chọn. A text-shadowcó thể xung đột với màu nền của vùng chọn và làm cho văn bản khó đọc. Đặt text-shadow: none;để làm cho văn bản rõ ràng và dễ đọc trong khi lựa chọn.

Xem Pen :: select text-shadow của Chris Coyier (@chriscoyier) trên CodePen.

Fancy :: lựa chọn

Được ghép nối với Sass hoặc bất kỳ bộ tiền xử lý nào khác, bạn có thể tạo ra các hiệu ứng thực sự thú vị với ::selection. Chọn văn bản trong bản trình diễn bên dưới:

Bạn có thể nhận thấy hiệu ứng không mượt mà trong một số trình duyệt. Hãy gửi bản trình diễn đó theo: những thứ có thể, nhưng có lẽ chỉ để giải trí.

Một thủ thuật nhỏ ngu ngốc nhưng thú vị khác là hiển thị một hình ảnh thông qua văn bản đã chọn.