w3docs logo

Propriété CSS user-select

La propriété user-select spécifie si l'utilisateur peut sélectionner le texte ou non.

La valeur par défaut est "auto" qui détermine comme suivi:

  • Sur les pseudo-éléments ::before et ::after, la valeur computée "none"
  • si l'élément est un élément modifiable, la valeur computée est "contain",
  • Si la valeur computée est user-select sur le parent de cet élément est "all", la valeur computée est "all".
  • Si la valeur computée de user-select sur le parent de cet élément est "none", la valeur computée est "none",
  • Sinon, la valeur computée est "text".
Pour la compatibilité maximale des navigateurs, des extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox sont utilisées avec cette propriété.
Valeur initiale auto
Appliquée à Tous les éléments, cependant quelques valeurs n'ont aucun effet sur les éléments pas en ligne.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.userSelect = "text";

Syntaxe

user-select: auto | none | text | all | contain | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      -webkit-user-select: auto; /* Safari 3.1+ */
      -moz-user-select: auto; /* Firefox 2+ */
      -ms-user-select: auto; /* IE 10+ */
      user-select: auto; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété user-select</h2>
    <div>Lorem ipsum est simplement du faux texte.</div>
  </body>
</html>

Dans l'exemple donné, le texte ne peut pas être sélectionné :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      -webkit-user-select: none; /* Safari 3.1+ */
      -moz-user-select: none; /* Firefox 2+ */
      -ms-user-select: none; /* IE 10+ */
      user-select: none; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété user-select</h2>
    <div>Lorem ipsum est simplement du faux texte.</div>
  </body>
</html>

Le texte est sélectionné par un clic au lieu de double clic:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      -webkit-user-select: all; /* Safari 3.1+ */
      -moz-user-select: all; /* Firefox 2+ */
      -ms-user-select: all; /* IE 10+ */
      user-select: all; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété user-select</h2>
    <div>Lorem ipsum est simplement du faux texte.</div>
  </body>
</html>

Dans l'exemple suivant, vous pouvez sélectionner n'importe quelle partie du texte que vous voulez:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      -webkit-user-select: text; /* Safari 3.1+ */
      -moz-user-select: text; /* Firefox 2+ */
      -ms-user-select: text; /* IE 10+ */
      user-select: text; /* Standard syntax */
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété user-select</h2>
    <div>Lorem ipsum est simplement du faux texte.</div>
  </body>
</html>

Valeurs

Valeur Description
auto Texte peut être sélectionné si le navigateur le permet. C'est la valeur par défaut de cette propriété.
none Texte n'est pas sélectionné.
text Texte est sélectionné par l'utilisateur.
all Texte est sélectionné par un clique.
contain L'élément est modifiable.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome firefox safari opera
54.0+
4.0 - 53.0 -webkit- 		2.0 -moz- 3.1 -webkit- 41.0+
15.0 - 40.0 -webkit-

Pratiquez vos connaissances

Qu'est-ce que la propriété 'user-select' en CSS fait?
Trouvez-vous cela utile?