CSS ::selection Pseudo-élément
Utilisez le pseudo-élément CSS ::selection pour sélectionner et styliser une partie du document. Découvrez ce pseudo-élément et essayez des exemples.
Le pseudo-élément ::selection cible la partie d'un document que l'utilisateur a mise en surbrillance — par exemple, en cliquant et faisant glisser la souris sur du texte, ou en appuyant sur Ctrl/Cmd + A. Il vous permet de remplacer l'apparence de surbrillance par défaut du navigateur afin que le texte sélectionné corresponde à votre identité visuelle ou améliore le contraste.
Par défaut, le navigateur affiche le texte sélectionné avec la couleur de surbrillance du système d'exploitation (généralement un fond bleu avec du texte blanc). Styliser ::selection remplace ce comportement par défaut pour les éléments que vous ciblez.
Ce chapitre couvre la syntaxe, les propriétés autorisées, les particularités des préfixes navigateurs, ainsi que des exemples pratiques pour le texte, les couleurs multiples et les champs de formulaire.
Pourquoi et quand l'utiliser
Un style de sélection personnalisé est un petit détail qui donne à un site un aspect soigné :
- Cohérence de la marque — faites correspondre la surbrillance à votre couleur d'accentuation plutôt qu'au bleu du système d'exploitation.
- Lisibilité — sur un fond sombre ou à faible contraste, la surbrillance par défaut peut rendre le texte difficile à lire ; vous pouvez choisir une combinaison garantissant un bon contraste.
- Portée — appliquez différentes couleurs de surbrillance à différentes sections (par exemple, les blocs de code par rapport au texte principal).
Gardez le texte sélectionné lisible : définissez toujours color et background-color ensemble afin de ne jamais vous retrouver, par exemple, avec du texte blanc sur une surbrillance presque blanche.
Quelles propriétés sont autorisées
::selection ignore la plupart des règles CSS. Seul un petit ensemble fixe de propriétés CSS peut être utilisé pour le styliser :
- color
- background-color
- text-shadow
- cursor
- caret-color
- outline et ses propriétés détaillées
- text-decoration et ses propriétés associées
text-emphasis-color
Les propriétés telles que font-size, font-family, margin ou transform n'ont aucun effet sur le texte sélectionné — la sélection n'est qu'une surbrillance au moment du rendu, pas une vraie boîte que vous pouvez déplacer ou redimensionner.
Firefox utilisait historiquement une forme avec préfixe propriétaire, ::-moz-selection. Pour prendre en charge les anciennes versions de Firefox, déclarez la règle préfixée avant la règle standard ::selection, comme le font les exemples ci-dessous.
Ce pseudo-élément a été introduit dans CSS Selectors Level 3, puis supprimé, et figure désormais dans la spécification CSS Pseudo-Elements Level 4.
Standard et version
Syntaxe
Pseudo-élément CSS ::selection
::selection {
css declarations;
}Exemple du pseudo-élément ::selection :
Exemple de code CSS ::selection
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
::-moz-selection {
color: #eee;
background: #8ebf42;
}
::selection {
color: #eee;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Exemple du pseudo-élément ::selection avec différentes couleurs :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.green::-moz-selection {
background-color: #8ebf42;
}
.green::selection {
background-color: #8ebf42;
}
.yellow::-moz-selection {
background-color: #FFFF19;
}
.yellow::selection {
background-color: #FFFF19;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>This is a text with the default selection background-color.</p>
<p class="green">Select this text to see a green background.</p>
<p class="yellow">Select this text to see a yellow background.</p>
</body>
</html>Exemple du pseudo-élément ::selection avec les balises <textarea> et <input> :
CSS ::selection, autre exemple de code
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input::-moz-selection {
color: #1c87c9;
background-color: #eee;
}
input::selection {
color: #1c87c9;
background-color: #eee;
}
textarea::-moz-selection {
color: white;
background-color: #8ebf42;
}
textarea::selection {
color: white;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>::selection selector example</h2>
<p>Input element</p>
<form>
<input type="text" value="Select this input text" />
<p>Textarea element</p>
<textarea rows="5" cols="25">Select this textarea text</textarea>
</form>
</body>
</html>Points à garder à l'esprit
- Il n'hérite pas comme les propriétés normales. Une règle
::selections'applique à l'élément qu'elle cible ; ce n'est pas une valeur qui se propage en cascade aux enfants sélectionnés comme le faitcolor. Pour styliser la sélection sur tout le site, rédigez une règle sur un sélecteur large tel que::selection(correspond à tout) oubody ::selection. - L'arrière-plan doit être suffisamment opaque pour être visible. Un
background-coloravec une valeur alpha très faible peut être difficile à voir sur l'arrière-plan existant. - Limité à sa liste de propriétés. Si une déclaration semble n'avoir aucun effet, vérifiez la liste autorisée ci-dessus — elle est probablement ignorée.
Pour approfondir les propriétés individuelles utilisables ici, consultez color, background-color et text-shadow.