Comment désactiver en CSS la surbrillance de texte sélectionné
Une propriété CSS permet d'indiquer si un texte est sélectionnable ou non. Voici comment faire.
En CSS, il est possible de créer des boutons à partir d'autres balises HTML que la balise . De nombreux sites utilisent la balise lien afin de rediriger sur une autre page sans utiliser de JavaScript. Mais le fait d'utiliser cette technique rend le texte du bouton sélectionnable. Cela peut causer des problèmes d'affichage.
Pour résoudre ce problème, il faut faire appel au langage CSS. La propriété user-select permet d'indiquer si un texte est sélectionnable ou non. Cette propriété peut avoir plusieurs valeurs. auto indique que le texte peut être sélectionné selon les propriétés par défaut du navigateur. text indique que le texte est sélectionnable et none signifie le contraire. Pour empêcher la sélection d'un texte sur un bouton, il faut donc définir la valeur de la propriété user-select à none. Cette propriété est implémentée différemment selon les navigateurs, il est nécessaire d'utiliser des préfixes CSS.
.nonSelectionnable
{
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
user-select: none; /* Propriété standard */
}
Cette propriété n'est supportée par Internet Explorer que depuis la version 10 et par Opera à partir de la version 15. Si vous souhaitez être compatible avec les versions plus anciennes de ces navigateurs, il faut alors utiliser un attribut HTML, l'attribut unselectable. La valeur on indique que le texte ne peut pas être sélectionné alors que c'est le contraire avec la valeur off.