user-select

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS user-select contrôle si l'utilisateur·ice peut sélectionner du texte. Cela n'a aucun effet sur le contenu chargé dans l'interface utilisateur d'un navigateur (son chrome), sauf pour les boîtes de texte.

Exemple interactif

user-select: none;

user-select: text;

user-select: all;

<section id="default-example">
  <p id="example-element">Essayez de sélectionner ce texte</p>
</section>

#example-element {
  font-size: 1.5rem;
}

Syntaxe

css

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

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

Note : user-select n'est pas une propriété héritée, bien que la valeur initiale auto fasse qu'elle se comporte comme si elle était héritée la plupart du temps. Les navigateurs basés sur WebKit/Chromium implémentent la propriété comme héritée, ce qui viole le comportement décrit dans la spécification, et cela entraînera certains problèmes. Jusqu'à présent, Chromium a choisi de corriger les problèmes ^(ang.) pour que le comportement final respecte les spécifications.

Valeurs

none

Le texte de l'élément et de ses sous-éléments n'est pas sélectionnable. Notez que l'objet Selection peut contenir ces éléments.

auto

La valeur utilisée de auto est déterminée comme suit :

Pour les pseudo-éléments ::before et ::after, la valeur utilisée est none
Si la valeur utilisée de user-select sur le parent de cet élément est none, la valeur utilisée est none
Sinon, si la valeur utilisée de user-select sur le parent de cet élément est all, la valeur utilisée est all
Sinon, la valeur utilisée est text

text

Le texte peut être sélectionné par l'utilisateur·ice.

all

Le contenu de l'élément doit être sélectionné de manière atomique : si une sélection contient une partie de l'élément, alors la sélection doit contenir l'intégralité de l'élément, y compris tous ses descendants. Si un double-clic ou un clic contextuel se produit dans des sous-éléments, l'ancêtre le plus élevé avec cette valeur sera sélectionné.

Note : Le module d'interface utilisateur de base CSS définit une valeur contain pour la propriété user-select afin de permettre à la sélection de commencer à l'intérieur de l'élément pour être contenue dans les limites de cet élément, cependant, cela n'est pris en charge dans aucun navigateur.

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

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

Exemples

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>

CSS

css

.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

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

Résultat

Spécifications

Spécification
CSS Basic User Interface Module Level 4 # content-selection

Compatibilité des navigateurs

Voir aussi

Le pseudo-élément ::selection
L'objet JavaScript Selection

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 4 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu