Sélecteurs CSS préfixés pour les navigateurs Chrome, Edge, Safari (Webkit).

Sélecteurs préfixés par -webkit-.

Nous présentons ci-dessous les sélecteurs spécifiques aux navigateurs utilisant le moteur Webkit (Chrome, Edge, Safari...), tout au moins ceux qui n'ont pas été remplacés par un sélecteur standard, et ceux qui ont été implémentés dans la spécification CSS avec un nom différent.

Liste des pseudo-classes préfixées par -webkit-.

• :-webkit-any()

  Remplacé par le sélecteur standard :is().

Liste des pseudo-éléments préfixés par -webkit-.

• ::-webkit-file-upload-button

  Remplacé par le sélecteur standard ::file-selector-button

• ::-webkit-inner-spin-button ::-webkit-outer-spin-button

  Ces deux pseudo-éléments permettent de cibler respectivement le bouton flèche "vers le bas" et le bouton flèche "vers le haut" d'une zone de saisie du type number.
  Cependant le sélecteur ::-webkit-outer-spin-button ne semble pas pris en compte.
  Très peu de propriétés sont applicables sur ces pseudo-éléments.

     
• ::-webkit-meter-bar ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-suboptimum-value ::-webkit-meter-even-less-good-value

  Ces pseudo-éléments permettent de styler les différents parties d'un élément du type meter. Rappelons que cet élément affiche une barre dont on peut fixer les limites mini et maxi, une valeur basse, une valeur haute, la valeur actuelle et la valeur optimale.
  
  <meter min="0" max="100"
low="20" hight="80"
optimum="60" value="30" />
  
  Les couleurs de l'élément meter changent suivant la position de la valeur par rapport aux valeurs basse, haute. La valeur optimale définit dans quelle zone l'affichage se fait par défaut en vert. Ce composant peut être utilisé pour afficher la charge d'une batterie, le remplissage d'un disque, etc.

  1. ::-webkit-meter-bar : l'échelle complète.
  2. ::-webkit-meter-inner-element : le conteneur de l'élément meter.
  3. ::-webkit-meter-optimum-value : La partie de l'échelle qui représente la valeur lorsque cette dernière se situe dans la plage optimale (en général au dessus de la valeur basse (low).
  4. ::-webkit-meter-suboptimum-value : la partie de l'échelle qui représente la valeur lorsque cette dernière est en dehors de la plage optimale (en général en dessous de la valeur basse (low).
  5. ::-webkit-meter-even-less-good-value : la partie de l'échelle qui représente la valeur lorsque cette dernière est dans la plage opposée à la valeur optimale. Ce sélecteur étant moins prioritaire que le précédent, son effet est souvent masqué.

  Dans l'exemple ci-dessous, la première barre a son aspect d'origine, la deuxième a été stylée. Le curseur permet de changer la valeur des deux barres de progression.

  50
  
     
• ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value

  Ces pseudo-éléments permettent de styler les barres de progression, c'est à dire les éléments du type progress. Attention ! Pour que les styles appliqués à ces sélecteurs soient pris en compte, l'élément progress doit avoir sa propriété appareance fixée à la valeur none.

  1. ::-webkit-progress-bar : l'ensemble de la barre de progression, mais seule la partie supérieure à la valeur est visible (la partie droite).
  2. ::-webkit-progress-inner-element : le conteneur d'un élément progress. Souvent invisible car la barre de progression le cache en entier.
  3. ::-webkit-progress-value : la partie de la barre de progression qui correspond à la valeur.

  L'exemple ci-après montre deux barres de progression. La première a son aspect d'origine ; la deuxième a été mise en forme.

   
• ::-webkit-search-cancel-button ::-webkit-search-results-button

  Ces deux pseudo-éléments désignent les constituants d'une zone de saisie du type search.
  Le bouton d'annulation n'apparaît que si la zone n'est pas vide. Le bouton de résultat ne s'affiche que si l'attribut results est présent dans le code HTML.

  <input type="search" results="10" />

     
• ::-webkit-slider-runnable-track ::-webkit-slider-thumb

  Ces deux pseudo-éléments désignent respectivement la glissière et le curseur d'une zone de saisie du type range.

  <input type="range" min="0" max="100" value="50" />

  L'exemple ci-après montre une zone de saisie avec son aspect par défaut, et une deuxième zone de saisie mise en forme.