Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Personnaliser la couleur de fond et de typographie lors de la sélection d'un texte sur un site web

Thibaut Legrand
Thibaut Legrand
January 12, 2023
Style CSS Selection Texte

La sélection d'un texte sur un site web est une fonctionnalité importante pour les utilisateurs, qui leur permet de copier et de partager facilement du contenu. Cependant, l'apparence de la sélection par défaut peut ne pas être en adéquation avec le design du site. Heureusement, il est possible de personnaliser l'apparence de la sélection en utilisant les propriétés CSS. C'est ce que nous allons voir dans notre tutoriel du jour !

Utiliser les propriétés CSS pour personnaliser la sélection

Il existe différentes propriétés CSS qui permettent de définir les styles pour la sélection de tout le contenu dans une page web. Les propriétés les plus couramment utilisées sont ::selection, ::-moz-selection et ::-webkit-selection. Ces propriétés permettent de définir la couleur de fond et la couleur de typographie pour la sélection.

  • ::selection : permet de définir les styles pour la sélection de tout le contenu dans une page web
  • ::-moz-selection : permet de définir les styles pour la sélection de tout le contenu dans une page web, spécifique pour Mozilla Firefox
  • ::-webkit-selection : permet de définir les styles pour la sélection de tout le contenu dans une page web, spécifique pour Chrome et Safari

Exemple de personnalisation de la sélection d'un texte

Voici un exemple de code CSS qui définit la couleur de fond noire et la couleur de typographie blanche lorsqu'un texte est sélectionné dans la page web :

<style> ::selection { background-color: #000000; color: #ffffff; } ::-moz-selection { background-color: #000000; color: #ffffff; } ::-webkit-selection { background-color: #000000; color: #ffffff; } </style>

Dans Webflow, vous pouvez mettre ce code à l'intérieur la balise <head> de votre projet (dans les paramètres généraux du projet, puis dans 'custom code'). Une fois votre projet publié, vous pourrez constater l'ajout du style de sélection personnalisé.

Code CSS pour personnaliser la selection d'un texte avec un background noir et une couleur de texte blanche

Bonus : vous pouvez tester de sélectionner un texte dans cet article ;)

Les limites de la personnalisation de la sélection

Il est important de noter que les navigateurs peuvent avoir des implémentations différentes pour la sélection de texte, ce qui peut limiter la personnalisation possible avec les propriétés CSS. Il est donc important de tester la personnalisation sur différents navigateurs pour s'assurer que l'apparence souhaitée est correctement affichée pour les utilisateurs.

De plus, il faut également faire attention à l'accessibilité web de votre personnalisation. Il faut que la couleur du texte se démarque de la couleur du fond par exemple. En savoir plus sur l'accessibilité web.

La personnalisation de la sélection de texte sur un site web peut être un moyen efficace d'améliorer l'expérience utilisateur et de créer un design cohérent. En utilisant les propriétés CSS, vous pouvez facilement définir la couleur de fond et la couleur de typographie pour la sélection, créant ainsi un design personnalisé pour votre site web.

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions