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.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

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

CoincidenciasEstos 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>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

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

<section class="[&_::search-text]:bg-[#d9fff0] [&_::search-text]:text-[#18352b] [&_::search-text]:underline [&_::search-text]:text-shadow-[0_0_3px_#8ee9c0] [&_::search-text:current]:bg-[#ffcf5a] [&_::search-text:current]:text-[#231500] [&_::search-text:current]:underline [&_::search-text:current]:decoration-wavy [&_::search-text:current]:text-shadow-[0_0_7px_#ff8a00]">
  <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;
}

.search-text {
  & ::search-text {
    background-color: #d9fff0;
    color: #18352b;
    text-decoration: underline;
    text-shadow: 0 0 3px #8ee9c0;
  
    &:current {
      background-color: #ffcf5a;
      color: #231500;
      text-decoration: underline wavy;
      text-shadow: 0 0 7px #ff8a00;
    }
  }
}