Pour modifier la couleur du texte et du fond de la page, lorsqu'on sélectionne et qu'on met en surbrillance un texte, en HTML et CSS, vous pouvez utiliser le pseudo élément ::selection.
Ce pseudo élément s'applique lorsqu'un texte ou un élément HTML est mis en surbrillance, à l'aide du curseur d'une souris ou d'une sélection manuelle sur un autre type d'appareil.
Vous pouviez dès lors lui appliquer n'importe quelles règles CSS.
Dans l'exemple ci-dessous on change la couleur de fond et la couleur du texte mis en surbrillance avec les propriétés CSS color et background :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment modifier la couleur du texte sélectionné en HTML et CSS ?</title>
<style>
::selection {
background: red;
color: yellow;
}
</style>
</head>
<body>
Exemple pour changer la couleur d'un texte sélectionné.
</body>
</html>
Vous trouverez une démonstration de ce script pour changer la couleur et le fond d'un texte sélectionné sur le Bac à code.
