Styler la sélection

La plupart des navigateurs surlignent le texte sélectionné d’une page Web en bleu. Le pseudo-sélecteur ::selection permet de changer la couleur de la sélection en appliquant un style CSS à la sélection sur l’ensemble de la page ou des éléments spécifiques.

Pour modifier la sélection sur l’ensemble de la page, il suffit d’utiliser le pseudo-sélecteur ::selection tel quel, sans le précéder d’un autre sélecteur.

::selection {
    background-color: darkseagreen;
    color: white;
}

En spécifiant un sélecteur, par exemple un élément ou une classe, il est possible d’appliquer le style à certaines portions du document.

.maclasse::selection {
    background-color: #bca68f;
    color: white;
    text-shadow: 1px 1px 1px black;
}

Propriétés supportées

De façon générale, très peu de propriétés sont autorisées dans un bloc ::selection. Celles-ci peuvent varier d’un navigateur à l’autre. Les propriétés non supportées seront ignorées. Pour obtenir une expérience similaire sur plusieurs navigateurs, limitez-vous aux propriétés:

  • background-color
  • color
  • text-shadow

Exemples

Voir ce Pen par Orange (@cssactif) sur CodePen.

Compatibilité

  • Chrome
    • 4+
  • Firefox
    • 62+1
  • Edge
    • 12+
  • Internet Explorer
    • 9+
  • Safari
    • 3.1+
  • Chrome sur Android
    • 91+
  • Safari sur iOS
    • Non

Données de compatibilité par Can I Use?

1. Pour assurer la compatibilité sur Firefox 61 et antérieur, il faut utiliser le préfixe -moz, soit ::-moz-selection.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *