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. Toutefois, l'objet Selection pourra 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 (Selection) 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 54
Support complet 54
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Préfixée
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
IE Support complet 10Opera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 3.1
Préfixée
Support complet 3.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 54
Support complet 54
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 54
Support complet 54
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet 12
Préfixée
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée 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.
Opera Android Support complet 14
Préfixée
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 3.2
Préfixée
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 6.0
Préfixée
Support complet 6.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
auto
Expérimentale
Chrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
all
Expérimentale
Chrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
none
Expérimentale
Chrome Support complet OuiEdge Support complet 12Firefox Support complet 21
Support complet 21
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 21
Support complet 21
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
text
Expérimentale
Chrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE Support complet 10Opera Support complet OuiSafari Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes Allows typing in the <html> container.
WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes Allows typing in the <html> container.
Samsung Internet Android Support complet Oui
contain
Expérimentale
Chrome Aucun support NonEdge Support complet 12
Support complet 12
Support complet 12
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : element
Firefox Aucun support NonIE Support complet Oui
Support complet Oui
Support complet 10
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : element
Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet 12
Support complet 12
Support complet 12
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : element
Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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