user-select

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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.

css
/* 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;

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.

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.

containelement (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 : CSS UI 4 a renommé user-select: element en contain.

Syntaxe formelle

user-select = 
  auto     |
  text     |
  none     |
  contain  |
  all

Exemples

CSS

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

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

HTML

html
<p>Vous devriez pouvoir sélectionner ce texte.</p>
<p class="unselectable">Hop, vous ne pouvez pas sélectionner ce texte !</p>
<p class="all">
  Cliquer une fois permettra de sélectionner l'ensemble du texte.
</p>

Résultat

Spécifications

Specification
CSS Basic User Interface Module Level 4
# content-selection

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi