::selection

Try it

p::selection {
  color: red;
  background-color: yellow;
}

<p>
  Select a fragment of this paragraph, to see how its appearance is affected.
</p>

Các thuộc tính được phép sử dụng

Chỉ một số thuộc tính CSS nhất định có thể được dùng với ::selection:

• color
• background-color
• text-decoration và các thuộc tính liên quan
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color và -webkit-text-stroke-width

Đặc biệt, background-image bị bỏ qua.

Cú pháp

::selection {
  /* ... */
}

Khả năng tiếp cận

Đừng ghi đè kiểu văn bản được chọn chỉ vì lý do thẩm mỹ — người dùng có thể tùy chỉnh chúng theo nhu cầu của mình. Đối với những người có vấn đề về nhận thức hoặc ít thành thạo về công nghệ, những thay đổi bất ngờ đối với kiểu chọn có thể ảnh hưởng đến khả năng hiểu chức năng của họ.

Nếu có ghi đè, điều quan trọng là đảm bảo rằng tỷ lệ tương phản giữa màu văn bản và màu nền của vùng chọn đủ cao để những người có thị lực kém có thể đọc được.

Tỷ lệ tương phản màu được tìm thấy bằng cách so sánh độ sáng của văn bản được chọn và màu nền văn bản được chọn. Để đáp ứng Hướng dẫn Tiếp cận Nội dung Web (WCAG) hiện tại, nội dung văn bản phải có tỷ lệ tương phản là 4.5:1, hoặc 3:1 đối với văn bản lớn hơn như tiêu đề. (WCAG định nghĩa văn bản lớn là từ 18.66px đến 24px và đậm, hoặc 24px trở lên.)

• WebAIM: Color Contrast Checker
• MDN Hiểu WCAG, Giải thích Hướng dẫn 1.4
• Hiểu Tiêu chí Thành công 1.4.3 | W3C Hiểu WCAG 2.0

Ví dụ

HTML

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}

/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• pointer-events - kiểm soát sự kiện nào đang hoạt động trên phần tử