Changer la couleur du texte sélectionné dans une page web

Comme vous pouvez l’avez peut-être remarqué sur ce blog, il est possible de changer la couleur des sélections dans une page web avec les CSS. Pour créer cet effet sympa, qui ne fonctionne que sous Firefox et Safari, nous devront utiliser les sélecteurs non standardisés ::-moz-selection pour le premier et ::selection pour le second. Ils supportent tous deux les propriétés color et background-color.

Un petit example :

/* Le code pour Firefox / Gecko */
::-moz-selection {
color: white;
background-color: #379CB3;
}
/* Le code pour Safari / Webkit */
::selection {
color: white;
background-color: #379CB3;
}

Vous pouvez aussi changer les couleurs de la sélection pour un élément particulier. Par exemple span::-moz-selection pour les navigateurs basés sur le moteur de rendu Gecko et span::selection pour ceux utilisant Webkit n’affectera que le texte encadré de la balise HTML <span>.

Partager : Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs peuvent partager et faire découvrir vos pages.
  • Blogasty
  • Scoopeo
  • Wikio
  • StumbleUpon
  • del.icio.us
  • Ma.gnolia
  • Digg
  • Slashdot
  • Zataz
  • Blinklist France
  • Technorati
  • blogmarks
  • YahooMyWeb
  • BlogMemes Fr
  • Le Ouizz
  • Reddit France
Tags : , ,

TrackBack

URL de trackback pour cet article :
http://lapin-blanc.net/05/04/2008/couleur-selection-css/trackback/

Ecrire un commentaire