Playground de ::search-text y :current en CSS

Explora ::search-text con controles para las coincidencias de buscar en la página y usa :current para diferenciar el resultado activo.

Selector

::search-text se puede usar en toda la página con ::search-text o dentro de un selector concreto, por ejemplo .search-text ::search-text. Solo se pueden modificar background-color, color, text-decoration y text-shadow; otras propiedades no se aplican a este highlight.

Alcance del selector

Coincidencias

Estos estilos se aplican a todos los resultados que coinciden con el texto buscado por el navegador.

Color de fondo

Color de texto

Text decoration

Color de text-shadow

Coincidencia actual

:current permite diferenciar la coincidencia activa con ::search-text:current mientras se navega por los resultados.

Color de fondo

Color de texto

Text decoration

Color de text-shadow

Abre la función "Buscar en la página" — Ctrl+F / ⌘F y busca "resaltar".

Demo editorial

Usa buscar en la página para resaltar palabras repetidas en un artículo.

Alcance

Un selector concreto puede resaltar solo este bloque, mientras el selector global actúa en toda la página.

HTML

<p>Abre la función "Buscar en la página" — Ctrl+F / ⌘F y busca "resaltar".</p>

<section class="search-text">
  <div>
    <h2>Demo editorial</h2>
    <p>Usa buscar en la página para resaltar palabras repetidas en un artículo.</p>
  </div>

  <div>
    <h2>Alcance</h2>
    <p>Un selector acotado apunta a este bloque, mientras que el selector global puede estilizar cada coincidencia de la página.</p>
  </div>
</section>

CSS

.search-text ::search-text {
  background-color: #d9fff0;
  color: #18352b;
  text-decoration: underline;
  text-shadow: 0 0 3px #8ee9c0;
}

.search-text ::search-text:current {
  background-color: #ffcf5a;
  color: #231500;
  text-decoration: underline wavy;
  text-shadow: 0 0 7px #ff8a00;
}