::search-text - Sélecteur CSS

Pseudo-élément ::search-text - Description

::search-text cible le texte recherché par le navigateur, c'est à dire le texte tapé dans la zone accessible avec les touches CTRL F.

Peu de propriétés peuvent s'appliquer à ::search-text :

• La couleur du texte (color).
• La couleur de l'arrière-plan (background-color ou la propriété résumée background.

La norme m'impose pas que cette propriété soit implémentée. Et en effet peu de navigateur l'implémentent à part ceux basé sur webkit tels que Chrome   ou Edge  .

Généralement ce sélecteur est utilisé seul (on ne sait pas où va se trouver le texte recherché). Mais il est cependant possible de le combiner avec d'autres sélecteurs. Il est possible également de le combiner avec la pseudo-classe :current.

Pseudo-élément ::search-text - Exemples d'utilisation.

Ne visualiser les recherches que dans le texte utile.

Combiné avec d'autres sélecteurs, ::search-text ne met le texte recherché en évidence que dans ce paragraphe. Pour le constatez tapez CTRL F et saisissez un fragment de texte contenu dans ce paragraphe, comme "sélecteurs" par exemple (n'oubliez pas que cela ne fonctionnera pas sur Firefox  ).

Cela permet de limiter fictivement la recherche au texte utile, en éliminant par exemple la table des matières.

Pseudo-élément ::search-text - Compatibilité des navigateurs.

Le pseudo-élément ::search-text n'est reconnu que par les navigateurs basés sur webkit.

1

Pseudo-élément
::search-text

Estimation de la prise en charge globale.

45%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Androïd Brower

Chrome

Chrome pour Androïd

Edge

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Pseudo-élément ::search-text - Historique.

• Module CSS - Pseudo-éléments - Niveau 4

  Concernant ::search-text. Introduction du pseudo-élément optionnel ::search-text (seuls les navigateurs qui le souhaitent l'implémentent).
  

  15 Janvier 2015

  Document de travail.

  

  

  

Voir aussi...

Quelques pseudo-classes et pseudo-éléments ciblent le texte recherché. Nous vous invitons à regarder également les pages suivantes :