Estilizando los resultados de Ctrl+F con ::search-text

Durante años, estilizar los resaltados del buscador en página del navegador con CSS simplemente no era posible. El navegador era el dueño absoluto de esa interfaz. Podías personalizar ::selection para el texto seleccionado con el ratón, pero en el momento en que el usuario presionaba Ctrl+F, tu hoja de estilos no tenía nada que decir. Eso está empezando a cambiar — al menos en los navegadores basados en Chromium.

El pseudo-elemento ::search-text es una nueva característica experimental de CSS que te permite estilizar los resaltados producidos por la función nativa de búsqueda en página del navegador. Esto es lo que hace, cómo funciona y qué puedes esperar realísticamente de él en este momento.

Lo que ::search-text realmente hace

Cuando un usuario activa Ctrl+F (o Cmd+F en macOS) y escribe una consulta, el navegador resalta el texto coincidente en la página. Históricamente, esos resaltados eran pintados completamente por la capa user-agent del navegador — fuera del alcance de cualquier hoja de estilos del autor.

::search-text es un pseudo-elemento de resaltado CSS, parte de la misma familia que ::selection, ::target-text y ::spelling-error. Apunta a los fragmentos de texto que el navegador marca durante una sesión de búsqueda en página, dándote un punto de enganche para aplicar estilos personalizados.

Uso básico

La sintaxis es sencilla:

::search-text {
  background-color: oklch(85% 0.2 90);
  color: black;
}

También puedes apuntar a la coincidencia actualmente activa — aquella en la que el navegador está enfocado mientras navegas por los resultados — usando el estado :current:

::search-text:current {
  background-color: oklch(70% 0.25 60);
  color: white;
}

Esta distinción es importante para la UX. Sin :current, cada coincidencia se ve idéntica. Con él, puedes diferenciar visualmente el resultado enfocado del resto, que es exactamente como los navegadores lo estilizan de forma nativa.

Qué estilos se admiten realmente

::search-text sigue las mismas restricciones que otros pseudo-elementos de resaltado CSS. Estás limitado a un subconjunto específico de propiedades relacionadas con el pintado:

• color
• background-color
• text-decoration (y subpropiedades relacionadas)
• text-shadow

Las propiedades de diseño como padding, margin, border o font-size no tienen efecto. La capa de resaltado se pinta encima del contenido existente — no realiza ningún reflujo.

En qué se diferencia de la CSS Custom Highlight API

Vale la pena clarificar la distinción aquí, ya que ambas involucran pseudo-elementos de resaltado CSS.

La CSS Custom Highlight API te permite definir tus propios resaltados con nombre mediante JavaScript usando objetos Range y CSS.highlights.set(). Luego los estilizas con ::highlight(tu-nombre). Es potente, pero requiere JavaScript, y tú controlas qué texto se resalta.

::search-text es diferente: el navegador controla qué se resalta (lo que coincida con la consulta de búsqueda en página), y tú solo controlas el estilo visual. No se necesita JavaScript. No se requiere conocer la consulta de búsqueda.

Soporte de navegadores: Experimental y solo en Chromium

Esta es la parte que más importa para las decisiones de producción. A principios de 2026, ::search-text solo está disponible en navegadores basados en Chromium desde la versión 144 en adelante — Chrome y Edge en escritorio. Firefox y Safari aún no lo admiten. Puedes seguir el soporte actual en Can I use.

Considéralo una mejora progresiva. Los navegadores que no admiten ::search-text simplemente ignorarán la regla y volverán a su estilo de resaltado predeterminado. Eso está bien — la característica se degrada de manera elegante.

/* Solo se aplica en navegadores Chromium compatibles */
::search-text {
  background-color: #ffe066;
  color: #111;
}

::search-text:current {
  background-color: #f5a623;
  color: white;
}

Las consultas de funcionalidades como @supports selector(::search-text) no son necesarias para un fallback seguro, pero pueden ser útiles si quieres delimitar los estilos o comunicar el soporte de manera más explícita.

Vale la pena agregarlo ahora

::search-text no reemplazará el comportamiento predeterminado del navegador para la mayoría de los usuarios hoy en día. Pero para los equipos que construyen experiencias de lectura pulidas — sitios de documentación, aplicaciones con mucho contenido, sistemas de diseño — es una forma de bajo costo y sin JavaScript de alinear los resaltados de búsqueda en página con tu lenguaje visual, al menos para los usuarios con navegadores Chromium modernos.

Añádelo a tu hoja de estilos, combínalo con :current para diferenciar la coincidencia activa, y mantente atento al soporte de Firefox y Safari a medida que la especificación madure.

Conclusión

El pseudo-elemento ::search-text cierra una pequeña pero antigua brecha en CSS al permitir a los autores estilizar los resultados de búsqueda en página del navegador. Aunque el soporte actualmente está confinado a los navegadores Chromium, la API es simple, no requiere JavaScript y se degrada limpiamente en entornos no compatibles. Para sitios donde la experiencia de lectura importa, es una adición sencilla que acerca un paso más la interfaz nativa del navegador a tu sistema de diseño.

Preguntas frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..