-ms-user-select

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété CSS -ms-user-select est une propriété spécifique à Microsoft qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.

Syntax

Valeurs

none

Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.

element

Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.

text

Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.

Syntaxe formelle

none | element | text

Exemples

Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément <div> avec un identifiant blog. Ce conteneur contient un autre élément <div> avec l'identifiant blogPost pour le billet de la page. La classe comment est appliquée aux éléments <div> qui sont des commentaires. Le billet de blog contient un élément <input> et un élément <textarea> pour ajouter un commentaire.

La déclaration suivante désactive la sélection à l'exception du contenu éditable.

#blog {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
}

La déclaration suivante désactive la sélection pour le reste :

#blog, #blog input, #blog textarea, 
#blog *[contenteditable=true] { 
  -ms-user-select: none;  
  -webkit-user-select: none; 
  -moz-user-select: -moz-none;
}

La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.

#blogPost {
  -ms-user-select: element;
  -webkit-user-select:  text;
  -moz-user-select: text;
} 

#blog { 
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
}

La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.

.comment {
  -ms-user-select: element;
  -moz-user-select: text;
  -webkit-user-select: text;
} 

#blog{ 
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
}

Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.

#blogPost, .comment { 
  -ms-user-select: text;
} 

#blog { 
  -ms-user-select: none;
}

Spécifications

Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.

Valeur initialetext
Applicabiliténon-replaced elements
Héritéenon
Médiainteractif
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,