La propriété user-select permet de contrôler l'opération de sélection. Cela n'a aucun effet sur le contenu qui est chargé dans les éléments de l'interface (chrome), sauf pour les boîtes de texte.

/* Valeurs avec un mot-clé */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Valeurs globales */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Valeurs spécifiques à Mozilla */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* Valeurs spécifiques à WebKit */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Ne fonctionne pas pour Safari */

/* Valeurs spécifiques à Microsoft */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

Note : Cette propriété est reliée à l'objet JavaScript du DOM : Selection.

Note : Voir le tableau de compatibilité pour les différents préfixes utilisés par les navigateurs

Valeur initialeauto
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

none
On ne pourra pas sélectionner le texte de l'élément et celui de ses descendants. La sélection peut contenir ces éléments. À partir de Firefox 21, none se comporte comme -moz-none et la sélection peut donc être réactivée sur les éléments fils avec -moz-user-select:text.
auto

Le texte sera sélectionné avec les propriétés par défaut appliquées par l'agent utilisateur. La valeur calculée est déterminée de la façon suivante :

  • Pour les pseudo-éléments ::before et ::after, la valeur calculée sera none
  • Si l'élément est un élément éditable, la valeur calculée est contain
  • Sinon, si la valeur calculée de  user-select pour l'élément parent est all, la valeur calculée sera all
  • Sinon, si la valeur calculée de  user-select pour l'élément parent est all, la valeur calculée sera none
  • Sinon, la valeur calculée est text
text
Le texte peut être sélectionné par l'utilisateur.
-moz-none
Le texte de l'élément et des sous-éléments apparaissent comme s'ils ne pouvaient pas être sélectionnés. La sélection peut toutefois contenir ces éléments et on peut la réactiver pour les éléments fils avec -moz-user-select:text.
all
Dans un éditeur HTML, si un double clic ou si un clic contextuel se produit sur les éléments fils, c'est la valeur de l'ancêtre le plus haut qui sera sélectionnée.
contain
element (alias spécifique à IE)
Uniquement supporté par Internet Explorer. Cela permet d'activer la sélection au sein de l'élément, celle-ci ne pourra pas « sortir » de cet élément.

Note : user-select ne fait pas partie de la spécification CSS du W3C. Il y a donc quelques différences entre les différentes implémentations. Attention à bien tester votre application sur les différents navigateurs. Par exemple, l'héritage diffère entre les navigateurs :

  • Avec Firefox,  -moz-user-select n'est pas hérité depuis les éléments positionnés de façon absolue
  • Avec Safari et Chrome -webkit-user-select est hérité depuis ces éléments.
auto | text | none | contain | all

Exemples

CSS

.unselectable {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

HTML

<body>
  <p class="unselectable">L'utilisateur ne pourra pas sélectionner 
  ce texte dans Firefox, Chrome, Safari et IE.</p>
</body>

Résultat

Spécifications

Spécification État Commentaires
CSS Basic User Interface Module Level 4
La définition de 'user-select' dans cette spécification.
Version de travail Définition initiale. -webkit-user-select est indiqué comme étant un alias déprécié de user-select.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

54

6 -webkit-

12 -ms-

12 -webkit-

Oui -moz-

49 -webkit-

44 -webkit- 1

1015 -webkit- 3.1 -webkit-
contain Non

?

12 -webkit- 2

Non

?

Oui2

Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple5454

Oui -ms-

Oui -webkit-

? Non3.26.0
contain Non Non

?

Oui -webkit- 2

Non Non Non Non

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. Supported as element.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, Sheppy, Fredchat, teoli, louuis
Dernière mise à jour par : SphinxKnight,