::selection

Exemple interactif

p::selection {
  color: red;
  background-color: yellow;
}

<p>
  Sélectionnez un fragment de ce paragraphe pour voir comment son apparence est
  modifiée.
</p>

Propriétés autorisées

Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient ::selection :

• color
• background-color
• text-decoration ainsi que les propriétés détaillées associées
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color et -webkit-text-stroke-width

En particulier, background-image est ignorée.

Syntaxe

::selection {
  /* ... */
}

Accessibilité

Il est recommandé de ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques et notamment si l'utilisateur·ice a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.

Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.

La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : Web Content Accessibility Guidelines (WCAG) ^(angl.), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Un texte de grande taille est défini comme étant de 18,66 pixels et en gras ou plus grand, ou de 24 pixels ou plus.

• WebAIM : vérificateur de contraste ^(angl.)
• Explications des recommendation WCAG 1.4
• Comprendre le critère de succès 1.4.3 | W3C Comprendre les WCAG 2.0 ^(angl.)

Exemples

HTML

<div>Un peu de texte pour tester ::selection.</div>
<p>Essayez également de sélectionner du texte dans ce &lt;p&gt;</p>

CSS

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}

/* le texte sélectionné sera or sur fond rouge */
::selection {
  color: gold;
  background-color: red;
}

/* le texte sélectionné dans un paragraphe sera blanc sur fond bleu */
p::selection {
  color: white;
  background-color: blue;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• pointer-events qui contrôle les évènements actifs sur l'élément