Changer la couleur de sélection du texte en CSS
5 mn de lecture

Changer la couleur de sélection du texte en CSS

Aujourd’hui, j’ai envie de vous partager une astuce : comment changer la couleur de sélection du texte en CSS ?

Avez-vous déjà remarqué que lorsque vous sélectionnez du texte sur différents sites Web, l’arrière-plan de surbrillance et la couleur du texte sélectionné peuvent varier selon les sites ?

Il en est de même sur tous les sites que je crée. En effet, j’aime assortir la couleur de sélection du texte à la charte graphique du site. Ainsi cela offre aux visiteurs une expérience d’interface uniforme.

Et puis, c’est aussi ce genre de détail qui peut faire un petit plus en regard d’un site Web concurrent.

Alors, découvrez :

  • D’où vient la couleur de sélection du texte
  • Comment modifier la couleur de sélection du texte avec du CSS
  • Quels sont les navigateurs qui prennent en charge cette modification

D’où vient la couleur de sélection du texte ?

En fait, lorsque vous sélectionnez du texte sur une page Web, la couleur d’arrière-plan dépend essentiellement du système d’exploitation de votre machine.

Néanmoins, dans la plupart des navigateurs, la couleur d’arrière-plan de sélection est le bleu.

Il suffit de prendre pour exemple mon cas : je travaille sur un PC avec le système d’exploitation Windows 11 et le navigateur Chrome. Et voici de quelle couleur est la sélection de texte par défaut :

couleur sélection texte par défaut

En résumé, cette couleur de surbrillance peut donc différer en raison de :

  • La couleur de surbrillance par défaut du système d’exploitation de l’utilisateur
  • La personnalisation par le développeur du site

Comment changer facilement la couleur de sélection du texte

En fait, c’est extrêmement simple.

En effet, il suffit de définir les couleurs que vous souhaitez via le pseudo-élément ::selection dans la feuille de style CSS.

Et, pour le problème de compatibilité avec Firefox, vous inclurez le préfixe -moz- avant le sélecteur, comme ceci : ::-moz-selection.

Prenons le cas du code que j’ai inséré pour mon blog :

Je voulais que lorsque l’utilisateur sélectionne le contenu, la couleur d’arrière-plan de la sélection soit rose #CF2E87 et la couleur du texte en blanc.

Pour ce faire, j’ai écrit le code que voici dans lequel background-color:#CF2E87; correspond à la couleur de fond (rose) choisie pour la sélection de texte et color: #fff; à la couleur du texte (blanc).

/* couleur surlignage texte*/
/* pour Firefox */
::-moz-selection {
 background-color:#CF2E87;
 color: #fff;
}
/* pour Safari et Chrome */
::selection {
 background-color:#CF2E87;
 color: #fff;
}		

Et voilà le résultat :

arrière-plan sélection texte rose texte blanc

Pour faire de même, en premier lieu, dans votre tableau de bord WordPress, allez dans Apparence > Personnaliser > CSS additionnel (ou Custom CSS).

Puis, copiez et collez ce code en indiquant les couleurs souhaitées à la place des miennes.

Enfin, cliquez sur “publier”.

C’est tout 😃 !

💡 Néanmoins, faites attention lorsque vous choisissez vos couleurs à ce que le rapport de contraste entre le texte et la couleur d’arrière-plan de la sélection soit suffisamment élevé. En effet, si vous optez pour des couleurs trop proches, votre texte sera difficile à lire pour les visiteurs et ce n’est pas le but recherché.

Pour vérifier si le contraste des couleurs est accessible pour les utilisateurs, vous pouvez utiliser l’un de ces outils.

Prise en charge par les navigateurs


Vous vous demandez peut-être si la modification de la couleur de sélection sera effective sur tous les navigateurs Web.

Alors, la réponse est presque oui.

Car la prise en charge des divers navigateurs web pour le pseudo-élément ::selection s’est vraiment améliorée. (source : CanIUse en date du 22/03/2022).

compatibilité navigateurs web css selection de texte

Ce code fonctionne donc pour tous les navigateurs récents. Il fonctionne également pour Internet Explorer à partir de la version 9 (pour rappel, IE n’est plus pris en charge depuis le 15 juin 2022).

Néanmoins, en ce qui concerne les tablettes et les mobiles, iOS Safari et Opera Mini ne le supportent pas encore.

Mon avis sur le changement de la couleur de sélection du texte

Pour conclure, je ne sais pas à quel point le changement de couleur d’arrière-plan contribue au design d’un site Web.

Mais, je trouve que cela donne un côté fignolé au site.

C’est la raison pour laquelle, j’intègre toujours gratuitement ces quelques lignes de code dans les sites que je crée. De toute évidence, c’est le genre de petit cadeau que mes clients apprécient. 🥰

Et vous, qu’en pensez-vous ?

S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires