Styliser les résultats de Ctrl+F avec ::search-text

Pendant des années, styliser les surlignages de la recherche dans la page du navigateur avec CSS était tout simplement impossible. Le navigateur possédait entièrement cette interface. Vous pouviez personnaliser ::selection pour le texte sélectionné à la souris, mais dès qu’un utilisateur appuyait sur Ctrl+F, votre feuille de style n’avait plus son mot à dire. Cela commence à changer — du moins dans les navigateurs basés sur Chromium.

Le pseudo-élément ::search-text est une nouvelle fonctionnalité CSS expérimentale qui permet de styliser les surlignages produits par la fonction native de recherche dans la page du navigateur. Voici ce qu’elle fait, comment elle fonctionne, et ce que l’on peut raisonnablement en attendre aujourd’hui.

Ce que fait réellement ::search-text

Lorsqu’un utilisateur déclenche Ctrl+F (ou Cmd+F sur macOS) et saisit une requête, le navigateur met en évidence le texte correspondant sur la page. Historiquement, ces surlignages étaient entièrement peints par la couche user-agent du navigateur — hors de portée de toute feuille de style d’auteur.

::search-text est un pseudo-élément CSS de surlignage, appartenant à la même famille que ::selection, ::target-text et ::spelling-error. Il cible les fragments de texte que le navigateur marque pendant une session de recherche dans la page, vous offrant un point d’accroche pour appliquer des styles personnalisés.

Utilisation de base

La syntaxe est simple :

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

Vous pouvez également cibler la correspondance actuellement active — celle sur laquelle le navigateur est focalisé lorsque vous parcourez les résultats — en utilisant l’état :current :

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

Cette distinction est importante pour l’UX. Sans :current, toutes les correspondances se ressemblent. Avec lui, vous pouvez différencier visuellement le résultat focalisé des autres, ce qui est exactement ainsi que les navigateurs le stylisent nativement.

Quels styles sont réellement pris en charge

::search-text suit les mêmes contraintes que les autres pseudo-éléments CSS de surlignage. Vous êtes limité à un sous-ensemble spécifique de propriétés liées au rendu :

• color
• background-color
• text-decoration (et ses sous-propriétés associées)
• text-shadow

Les propriétés de mise en page comme padding, margin, border ou font-size n’ont aucun effet. La couche de surlignage est peinte par-dessus le contenu existant — elle ne provoque aucune redistribution.

En quoi cela diffère de la CSS Custom Highlight API

Il convient de clarifier la distinction ici, puisque les deux impliquent des pseudo-éléments CSS de surlignage.

La CSS Custom Highlight API vous permet de définir vos propres surlignages nommés via JavaScript en utilisant des objets Range et CSS.highlights.set(). Vous les stylisez ensuite avec ::highlight(your-name). C’est puissant, mais cela nécessite du JavaScript, et vous contrôlez quel texte est mis en évidence.

::search-text est différent : le navigateur contrôle ce qui est mis en évidence (tout ce qui correspond à la requête de recherche dans la page), et vous ne contrôlez que le style visuel. Pas besoin de JavaScript. Aucune connaissance de la requête de recherche requise.

Prise en charge des navigateurs : expérimentale et limitée à Chromium

C’est la partie la plus importante pour les décisions de production. Au début de 2026, ::search-text n’est disponible que dans les navigateurs basés sur Chromium à partir de la version 144 — Chrome et Edge sur desktop. Firefox et Safari ne le prennent pas encore en charge. Vous pouvez suivre la prise en charge actuelle sur Can I use.

Considérez cela comme une amélioration progressive. Les navigateurs qui ne prennent pas en charge ::search-text ignoreront simplement la règle et reviendront à leur style de surlignage par défaut. C’est très bien — la fonctionnalité se dégrade gracieusement.

/* S'applique uniquement dans les navigateurs Chromium compatibles */
::search-text {
  background-color: #ffe066;
  color: #111;
}

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

Les requêtes de fonctionnalité comme @supports selector(::search-text) ne sont pas nécessaires pour un repli sûr, mais peuvent être utiles si vous souhaitez délimiter les styles ou communiquer la prise en charge de manière plus explicite.

À ajouter dès maintenant

::search-text ne remplacera pas le comportement par défaut du navigateur pour la plupart des utilisateurs aujourd’hui. Mais pour les équipes qui construisent des expériences de lecture soignées — sites de documentation, applications riches en contenu, design systems — c’est un moyen peu coûteux et sans JavaScript d’aligner les surlignages de recherche dans la page sur votre langage visuel, du moins pour les utilisateurs sur les navigateurs Chromium modernes.

Ajoutez-le à votre feuille de style, associez-le à :current pour différencier la correspondance active, et gardez un œil sur la prise en charge de Firefox et Safari à mesure que la spécification mûrit.

Conclusion

Le pseudo-élément ::search-text comble un petit mais ancien manque de CSS en permettant aux auteurs de styliser les résultats de recherche dans la page du navigateur. Bien que la prise en charge soit actuellement limitée aux navigateurs Chromium, l’API est simple, ne nécessite aucun JavaScript et se dégrade proprement dans les environnements non pris en charge. Pour les sites où l’expérience de lecture est importante, c’est un ajout simple qui rapproche d’un pas l’interface native du navigateur de votre design system.

FAQ

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