CSS - Propriété user-select

Description de la propriété user-select.

Définit si le contenu de l'élément peut être sélectionné par l'utilisateur. Cette propriété peut être utilisée par exemple pour dissuader le copier-coller du texte d'un élément, ou au contraire pour faciliter la sélection d'un élément en évitant la sélection accidentelle d'autres éléments proches.

Remarque. Cette propriété n'est pas standardisée : bien que de nombreux navigateurs la traitent, des différences de comportement sont à noter. Par exemple Firefox n'inclut pas les zones de saisie ( input ) dans la sélection, alors que d'autres navigateurs le font.

Syntaxes pour user-select.

• user-select: auto;
  Exemple

  Valeur par défaut. La possibilité de sélection dépend de la nature de l'élément :

  1. Sur les textes ajoutés avec les pseudo-éléments ::before ou ::after, auto est équivalent à none.
  2. Si l'élément est un élément éditable, auto est équivalent à contain.
  3. Dans tous les autres cas, la valeur auto est équivalente à inherit sauf si la valeur de cette propriété pour le parent est contain, auquel cas auto prend la valeur text.
• user-select: none;
  Exemple

  Il n'est pas possible de commencer une sélection sur cet élément. Néanmoins, l'élément peut être inclus dans une sélection plus générale qui l'englobe.

  D'autre part, si l'élément contient des parties éditables (zones de saisie par exemple), la sélection peut se faire à l'intérieur de ces éléments éditables.

  Remarque : les navigateurs Mozilla reconnaissent encore la valeur -moz-none, mais qui peut maintenant être remplacée par la valeur standard.

• user-select: text;
  Exemple

  Aucune contrainte concernant la sélection n'est mise en place : la sélection est possible.

• user-select: contain; ⚠
  Exemple

  Les sélections sont possibles à condition qu'elles restent dans le contenu de l'élément. Autrement dit, il n'est pas possible de commencer une sélection à l'extérieur de l'élément et de la terminer à l'intérieur. L'inverse n'est pas possible non plus : commencer la sélection dans l'élément et la terminer à l'extérieur.

• user-select: all;
  Exemple

  Une sélection du contenu complet de l'élément se fait automatiquement dès que l'utilisateur clique quelque part dans l'élément.

• user-select: element; ✗
  Exemple

  Cette valeur est spécifique à Internet Explorer. Lorsqu'une sélection est commencée dans l'élément, elle ne peut pas se poursuivre à l'extérieur de ce dernier.

• user-select: initial;

  La valeur initiale est auto.

• user-select: unset; user-select: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Choisissez une valeur pour user-select et tentez de sélectionner dans l'élément.

Remarque : les contenus ajoutés par les pseudo-éléments ::before et ::after (affichés en gris) obéissent à des règles de sélection particulières, et différentes d'un navigateur à l'autre.

Prise en charge par les navigateurs (compatibilité).

Afficher le tableau de compatibilité (informations fournies par canIuse.com).