Propriété CSS user-select

La propriété CSS user-select contrôle si l'utilisateur peut sélectionner du texte avec la souris, le clavier ou un appui long sur les appareils tactiles. Elle ne modifie pas l'apparence du texte — elle affecte uniquement le comportement de sélection.

Cette page couvre ce que fait chaque valeur, dans quels cas utiliser user-select, les pièges à éviter et des exemples modifiables.

Pourquoi utiliser user-select

La sélection de texte est un comportement par défaut du navigateur, il n'y a donc généralement pas lieu de la modifier. Vous la changez délibérément dans quelques situations :

Empêcher une sélection accidentelle sur les contrôles d'interface — boutons, onglets, éléments de menu, poignées de glisser-déposer. Lorsqu'un utilisateur double-clique ou fait glisser l'un de ces éléments, le navigateur met en évidence le libellé, ce qui donne une impression de dysfonctionnement. user-select: none empêche cela.
Copie en un clic pour de courtes chaînes comme des codes de réduction, des clés API ou des commandes. user-select: all sélectionne l'intégralité de l'élément en un seul clic pour que l'utilisateur puisse le copier instantanément.
Rétablir la sélection lorsqu'un parent l'a désactivée mais qu'un enfant (une adresse, un bloc de code) doit rester sélectionnable — définissez user-select: text sur l'enfant.

La valeur par défaut est "auto", 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 modifiable, 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 vendeurs (-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-inline.
Héritage	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.userSelect = "text";

Syntaxe

Valeurs CSS de 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>

Essayez vous-même »

Dans cet exemple, le texte peut être sélectionné si le navigateur le permet.

Exemple de la propriété user-select avec la valeur "none" :

Exemple CSS user-select avec préfixes

<!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>

Essayez vous-même »

Le texte ne peut pas être sélectionné.

Exemple de la propriété user-select avec la valeur "all" :

Exemple CSS user-select avec la valeur all

<!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>

Essayez vous-même »

Un clic n'importe où dans l'élément sélectionne tout le texte qu'il contient — pratique pour la copie en un clic de codes ou de commandes.

Exemple de la propriété user-select avec la valeur "text" :

Exemple CSS user-select avec la valeur text

<!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>

Essayez vous-même »

Le texte peut être sélectionné normalement par l'utilisateur. Cette valeur est utile pour réactiver la sélection sur un enfant particulier lorsqu'un ancêtre a défini user-select: none.

Points importants à retenir

user-select: none n'est pas une fonctionnalité de sécurité. Elle bloque uniquement la sélection habituelle à la souris ou au clavier — le texte reste dans le DOM et est entièrement accessible via "Afficher la source", les lecteurs d'écran et la copie par clavier dans de nombreux navigateurs. Ne l'utilisez jamais pour "protéger" du contenu.
Elle ne désactive pas la copie par programmation ni via un clic droit → Copier dans tous les navigateurs. Si vous devez réellement bloquer la copie, vous devez gérer l'événement copy en JavaScript — mais réfléchissez bien à l'opportunité de le faire.
Héritage ? Non. user-select n'est pas héritée au sens habituel du terme, mais sa valeur calculée dépend du parent (voir les règles "auto" ci-dessus), de sorte que définir none sur un conteneur affecte effectivement ses descendants.
Associez-la à pointer-events avec discernement. Elles résolvent des problèmes différents : user-select contrôle la mise en évidence du texte, tandis que pointer-events contrôle si un élément répond à la souris ou au toucher.

Valeurs

Valeur	Description	Essayer
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é.	Essayer »
none	Le texte n'est pas sélectionnable.	Essayer »
text	Le texte est sélectionnable par l'utilisateur.	Essayer »
all	Le texte est sélectionné en un seul clic.	Essayer »
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 modifiables.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Exercice

Pratique

Quelle affirmation est correcte concernant la propriété CSS user-select ?

Si l'élément est un élément modifiable, la valeur calculée est 'cover'.Si la valeur calculée de user-select sur le parent de cet élément est 'none', la valeur calculée est 'auto'.Sur les pseudo-éléments ::before et ::after, la valeur calculée est 'text'.Si la valeur calculée de user-select sur le parent de cet élément est 'all', la valeur calculée est 'all'.

Propriétés associées

pointer-events — contrôler si un élément réagit aux événements de souris et de toucher.
cursor — modifier le pointeur de la souris affiché sur un élément.
::before et ::after — les pseudo-éléments dont la valeur calculée de user-select est toujours none.