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 :
- Sur les textes ajoutés avec les pseudo-éléments
::before
ou::after
,auto
est équivalent ànone
. - Si l'élément est un élément éditable,
auto
est équivalent àcontain
. - Dans tous les autres cas, la valeur
auto
est équivalente àinherit
sauf si la valeur de cette propriété pour le parent estcontain
, auquel casauto
prend la valeurtext
.
- Sur les textes ajoutés avec les pseudo-éléments
- 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
. -
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.
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 le tableau de compatibilité (informations fournies par canIuse.com).