Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.

Ajouter un préfixe :
user-select :
-moz-user-select :
-ms-user-select :

Portez au juge cinq bols de vos fameux whisky.

Prise en charge par les navigateurs (compatibilité).

Afficher les versions antérieures   Afficher la version à venir