Pseudo-élément CSS ::selection
Le pseudo-élément ::selection correspond à une partie mise en surbrillance du document. Il permet d'appliquer des styles à la partie d'un document sélectionnée par l'utilisateur (par exemple, en cliquant et en faisant glisser la souris sur du texte).
La couleur d'arrière-plan par défaut de la sélection de texte est bleue, et cette propriété permet de modifier cette couleur par défaut.
Seules quelques propriétés CSS peuvent être utilisées pour styliser le pseudo-élément ::selection :
- color
- background-color
- text-shadow
- cursor
- caret-color
- outline et ses propriétés dérivées
- text-decoration et ses propriétés associées
- text-emphasis-color
INFO
Le préfixe -moz- est utilisé avec ce sélecteur sous la forme ::-moz-selection.
Ce pseudo-élément a été introduit dans le niveau 3 des sélecteurs CSS, mais a ensuite été retiré. Il se trouve actuellement dans le niveau 4 des pseudo-éléments.
Version
Niveau 4 des pseudo-éléments CSS
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 :
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>Pratique
Que pouvez-vous réaliser à l'aide du pseudo-élément ::selection en CSS ?