user-select

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. La propriété semblable user-focus a été proposée dans certains brouillons pour css3-ui mais a été rejetée par le groupe de travail.

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

Syntaxe

user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; 
/* ne fonctionne pas dans Safari, seules les
   valeurs "none" et "text" fonctionnent */

-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

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.
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.

Note : CSS UI 4 a renommé user-select: element en contain.

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`.

Fonctionnalité	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	6.0-webkit- 54.0	(Oui)-ms-webkit	(Oui)-moz^[1]	10-ms	15.0-webkit	3.1-webkit
`element`	Pas de support	(Oui)	Pas de support	(Oui)	?	Pas de support

Fonctionnalité	Android	Webview Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome pour Android
Support simple	2.1	54.0	?	10-ms 11-webkit^[2]	Pas de support	3.2(Oui)	54.0
`element`	?	Pas de support	?	?	?	?	Pas de support

[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[2] Voir la documentation sur MSDN.