Modifier la couleur de sélection du texte en CSS3

I. Présentation

Ca fait bien longtemps que je n'avais pas fait de tutoriels en rapport avec le web, et encore plus longtemps pour vous parler de CSS. Mais comme c'est aussi un domaine qui me plaît, je me dois de partager des petites astuces avec vous.

Par l'intermédiaire de CSS3, vous pouvez personnaliser la couleur de sélection du texte pour votre site web, pour remplacer la couleur par défaut du navigateur. Ceci s'effectue par l'intermédiaire du sélecteur ::selection que nous allons découvrir ensemble.

II. CSS3 et ::selection

En fait, le sélecteur ::selection n'est pas le seul qui peut-être utilisé puisque ça dépend du moteur de rendu intégré à votre navigateur. Comme bien souvent en CSS, pour une même modification il faudra utiliser plusieurs sélecteurs pour que ce soit aussi joli sur un navigateur que sur un autre.

Dans tous les cas, et ils se sont au moins mis d'accord sur ça, les deux seuls propriétés supportées sont "color" et "background" pour gérer la couleur du texte lorsque l'on effectue une sélection ainsi que l'arrière-plan, qui sera la couleur de surlignage du texte.

Voici un exemple de code...

- Pour WebKit (utilisé par Chrome et Safari, par exemple) :

::selection {
 color: #fff;
 background: #0091C7;
 }

- Pour Gecko (utilisé par Mozilla Firefox, par exemple) :

::-moz-selection {
 color: #fff;
 background: #0091C7;
 }

Ce qui permettra d'obtenir un résultat comme ceci lorsque l'on sélectionne du texte sur la page concernée par ce style CSS :

css-selection

A vous de jouer maintenant 😉

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian B.

Consultant chez Délibérata le jour, blogueur pour IT-Connect la nuit, je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

florian has 2270 posts and counting.See all posts by florian

Laisser un commentaire

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

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.