Modifier la couleur de la séléction en CSS

Bonjour à tous, petite astuces CSS du jours, je vais vous apprendre à modifier la couleur de la séléction en CSS ! Pour ça c'est très simple il suffit d'ajouter ça dans votre code CSS !

[Note de sitewaide]

Attention, c'est un code CSS3, comme vous devez le savoir, le css3 n'est pas implanté sur tout les navigateurs.

De plus, chaque navigateur, même si cela à tendance à diminuer, utilise son propre préfixe (-moz, -k, -webkit etc...). Cette utilisation commence à diminuer sur les navigateurs basés sur webkit (Google Chrome et Safari).

[/note de sitewaide]

::-moz-selection { /* Pour firefox */
background:red;
color:white;
}
::selection { /* Pour les autres */
background: red;
color:white;
}

 

On va décrypter un peu le code tout d’abord pour que ce soit compatible avec Firefox il faut

mettre la balise ::-moz-selection et pour les autres navigateur (Attention, je n’ai pas testé

qu’avec Google Chrome) il suffit de mettre ::selection. Ensuite, il faut définir la couleur

de la sélection donc facile on utilise la propriété background (ou background-color) et comme

valeur vous mettez la couleur que vous voulez, et si vous voulez que votre texte soit un peu

plus lisible (en fonction des couleurs) je vous conseil de changer la couleur de votre texte

grâce à la propriété color.

Une démonstration est disponible ici !

Ce contenu a été publié dans Codage. Vous pouvez le mettre en favoris avec ce permalien.

5 réponses à Modifier la couleur de la séléction en CSS

  1. Ping : Les tweets qui mentionnent Modifier la couleur de la séléction en CSS « site-waide -- Topsy.com

  2. Merci bien pour ce code !;)

  3. Pas mal, je ne savais pas que la "::selection" était implementé par les autres navigateurs, ni que le CSS3 comprenait un truc du genre (je pensais que Mozilla avait fait une folie de son coté) :)

    Merci !

  4. BeerTime dit :

    Merci pour l'astuce, je l'ai mis en place sur mon site avec un petit survol doré, ça envoie !

  5. haddouche dit :

    salut,
    merci.. Tel chose donne un plus.. simple mais fort.

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>