008 – Personnaliser la sélection de l’utilisateur

008 – Personnaliser la sélection de l’utilisateur

Comment personnaliser la sélection de l’utilisateur et l’adapter à ton design ? 🖋️

On n’est pas sur une astuce de fou mais ça reste intéressant. On va parler d’un pseudo élément CSS qui pourrait apporter un petit plus à ton design. 😉

::selection (ou ::-moz-selection sous Firefox)

Grâce à ce pseudo élément on peut appliquer des propriétés CSS à la portion du document qui a été sélectionnée par l’utilisateur.

Tu peux par exemple changer la couleur de surlignage et rendre le design de ton site plus coloré ! 🎨

Mais ça ne sert pas qu’à ça, au final ce soit 8 propriétés qui peuvent être modifiées par le pseudo élément :

  • color
  • background-color
  • cursor
  • caret-color
  • outline
  • text-decoration
  • text-emphasis-color
  • text-shadow

Je te propose même un petit Codepen avec quelques exemples fait par mes soins 😎

https://codepen.io/Craaftx/pen/KKgpaEa

Haut de page