Propriété CSS user-select
La propriété user-select spécifie si l'utilisateur peut ou non sélectionner du texte.
La valeur par défaut est "auto", qui est déterminée comme suit :
- Sur les pseudo-éléments ::before et ::after, la valeur calculée est "none"
- Si l'élément est un élément éditable, la valeur calculée est "contain",
- Si la valeur calculée de user-select sur le parent de cet élément est "all", la valeur calculée est "all".
- Si la valeur calculée de user-select sur le parent de cet élément est "none", la valeur calculée est "none",
- Sinon, la valeur calculée est "text".
INFO
Les préfixes fournisseurs (-webkit-, -moz-) sont désormais obsolètes dans tous les navigateurs modernes. La propriété standard user-select est entièrement prise en charge sans eux.
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments, bien que certaines valeurs n'aient aucun effet sur les éléments non en ligne. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.userSelect = "text"; |
Syntaxe
Valeurs CSS user-select
user-select: auto | none | text | all | contain | initial | inherit;Exemple de la propriété user-select avec la valeur "auto" :
Exemple de code CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Dans l'exemple ci-dessus, le texte peut être sélectionné si le navigateur le permet.
Exemple de la propriété user-select avec la valeur "none" :
Exemple de préfixes CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Le texte ne peut pas être sélectionné.
Exemple de la propriété user-select avec la valeur "all" :
Exemple de valeur "all" pour CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Un clic n'importe où dans l'élément sélectionne tout le texte qu'il contient.
Exemple de la propriété user-select avec la valeur "text" :
Exemple de valeur "text" pour CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Le texte peut être sélectionné normalement par l'utilisateur.
Valeurs
| Valeur | Description | Tester |
|---|---|---|
| auto | Le texte peut être sélectionné si le navigateur le permet. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
| none | Le texte n'est pas sélectionné. | Tester » |
| text | Le texte est sélectionné par l'utilisateur. | Tester » |
| all | Le texte est sélectionné en un seul clic. | Tester » |
| contain | Le texte peut être sélectionné, mais la sélection ne peut pas s'étendre au-delà des limites de l'élément. Généralement utilisé pour les éléments éditables. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle affirmation est correcte concernant la propriété CSS user-select ?