::search-text

Try it

p::search-text {
  color: crimson;
  background-color: wheat;
}

<p>
  Using your browser's "Find in page" functionality, find a word or phrase that
  appears in this sentence, and note how, in supporting browsers, each result is
  highlighted using the specified custom styles.
</p>

Cú pháp

::search-text {
  /* ... */
}

Mô tả

Hầu hết các trình duyệt đều có một loại chức năng tìm kiếm văn bản trong trang, thường được gọi là "Find" hoặc "Find in page". Phần tử giả ::search-text, một trong các phần tử giả highlight, cho phép bạn áp dụng một tập hợp kiểu giới hạn cho các kết quả văn bản được trình duyệt tô sáng bằng chức năng tìm kiếm.

Không phải tất cả các trình duyệt và phiên bản trình duyệt đều tô sáng kết quả tìm kiếm bằng các highlight trong trang có thể tạo kiểu bằng CSS. Trong những trường hợp như vậy, ::search-text có thể chưa được triển khai hoặc chỉ bị bỏ qua.

Sử dụng ::search-text làm bộ chọn đơn lẻ sẽ tạo kiểu cho các kết quả tìm kiếm của trình duyệt xuất hiện ở bất kỳ đâu trên trang. Nếu bạn chỉ muốn tạo kiểu cho kết quả tìm kiếm của trình duyệt xuất hiện bên trong một số phần tử nhất định, bạn có thể kết hợp ::search-text với các bộ chọn khác, ví dụ: section::search-text.

Ngoài ra, ::search-text có thể được kết hợp với lớp giả :current để cung cấp kiểu cụ thể cho kết quả tìm kiếm đang được tập trung, ví dụ:

p::search-text {
  color: white;
  background-color: purple;
}

p::search-text:current {
  background-color: crimson;
}

Mô hình kế thừa

Phần tử giả ::search-text tuân theo mô hình kế thừa đặc biệt chung cho tất cả các phần tử giả highlight, trong đó kiểu được kế thừa từ cả phần tử cha của chúng và các phần tử giả của cha chúng. Để biết thêm chi tiết về cách kế thừa này hoạt động, xem phần Kế thừa của các phần tử giả highlight.

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

Một tập hợp con giới hạn các thuộc tính CSS có thể được dùng với ::search-text:

• color
• background-color
• Viết tắt text-decoration và các thuộc tính dài hạn liên quan:
  • text-decoration-line: chỉ các giá trị grammar-error, spelling-error, line-through, none và underline.
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration-skip-ink
• text-underline-offset
• text-shadow

Khả năng tiếp cận

Hãy hạn chế ghi đè kiểu kết quả tìm kiếm văn bản, đặc biệt khi làm vậy chỉ vì lý do thẩm mỹ. Đố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 các kiểu này có thể ảnh hưởng đến khả năng hiểu chức năng của họ.

Trường hợp sử dụng chính của ::search-text là tăng độ tương phản màu so với kiểu mặc định của trình duyệt. Khi tùy chỉnh văn bản được tô sáng, điều quan trọng là đảm bảo rằng tỷ lệ tương phản giữa màu nền trước và nền sau đủ lớn để người dùng khiếm thị có thể đọc được nội dung của văn bản được tô sáng.

Ví dụ

Kiểu tùy chỉnh cho kết quả tìm kiếm văn bản

Ví dụ này cho thấy cách sử dụng ::search-text và :current để tạo kiểu tùy chỉnh cho kết quả tìm kiếm "Find in page" của trình duyệt.

HTML

HTML gồm một đoạn văn bản cơ bản. Chúng ta sẽ không hiển thị nguồn HTML, vừa để ngắn gọn, vừa để dễ dàng điều hướng kết quả tìm kiếm trong ví dụ được hiển thị.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus est
  eget eros congue pellentesque. Etiam a augue accumsan, scelerisque nisl sit
  amet, lobortis nulla. Aliquam condimentum eu orci eu elementum. Donec
  porttitor quam et posuere commodo. Mauris rhoncus diam a scelerisque molestie.
  Integer sollicitudin risus dui, ut sagittis lorem laoreet eget. Duis eget
  pretium enim. Morbi tristique, diam sit amet gravida finibus, metus ex
  tincidunt nibh, ac volutpat urna purus et arcu. Donec risus risus, semper vel
  purus sit amet, gravida vestibulum est. Sed et tristique urna. Nam vel mi eget
  nisi consectetur elementum. Aenean faucibus aliquam cursus. Morbi posuere
  tincidunt velit, et sagittis quam sagittis in. Nam eget ante ultrices, auctor
  dui vel, euismod lacus. Vivamus tincidunt, sem ac sodales aliquet, tortor
  tortor consequat diam, nec tempor mi dui vel eros. Aliquam ac erat et metus
  egestas scelerisque.
</p>

CSS

Trong CSS, chúng ta bắt đầu bằng cách tạo kiểu cho phần tử giả ::search-text. Chúng ta đặt kiểu tùy chỉnh cho background-color, color và text-shadow.

html {
  font-family: "Helvetica", "Arial";
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
  width: 90%;
  margin: 0 auto;
}
@layer no-support {
  body::before {
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em 0;
  }
  @supports not selector(:current) {
    body::before {
      content: "Your browser doesn't support the :current pseudo-class.";
    }
  }
  @supports not selector(::search-text) {
    body::before {
      content: "Your browser doesn't support the ::search-text pseudo-element.";
    }
  }
}

::search-text {
  background-color: purple;
  color: white;
  text-shadow: 1px 1px 1px black;
}

Cuối cùng, chúng ta tạo kiểu cho kết quả tìm kiếm đang được tập trung qua ::search-text:current, cung cấp cho nó một background-color khác và một số kiểu text-decoration để phân biệt với các kết quả còn lại.

::search-text:current {
  background-color: crimson;
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 3px;
}

Kết quả

Ví dụ được hiển thị như sau:

Hãy thử dùng giao diện tìm kiếm trong trang của trình duyệt để tìm một từ xuất hiện nhiều lần trong văn bản ví dụ, chẳng hạn như "aliquam", "amet" hoặc "tortor". Di chuyển giữa các kết quả trước và tiếp theo để xem kiểu :current.

Thông số kỹ thuật

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

Xem thêm

• :current
• Các phần tử giả highlight
• Module các phần tử giả CSS