Désactiver la sélection de texte d'une page web avec CSS

Par JEAN PAUL ADENIS, publié le jeudi 26 mai 2022 15:54 - Mis à jour le jeudi 26 mai 2022 16:12

Pour empêcher la sélection de texte dans une page html et donc le copier-coller.

Passer en mode source 
Ajouter le style ci-dessous (tout au début de la page) :

<style>
      .unselectable {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #cc0000; /* couleur du texte */
      }
    </style>

 

Un texte ordinaire (pas de style) :

Je suis un texte sélectionnable. Tu peux me sélectionner.

Appliquer le style sur le texte à " protéger " :

<div class="unselectable">Je suis un texte non sélectionnable. Ma sélection de texte est désactivée.</div>

 

Ce qui donne :

Je suis un texte sélectionnable. Tu peux me sélectionner.

Je suis un texte non sélectionnable. Ma sélection de texte est désactivée.
Catégories
  • Publication - pour aller plus loin