Maison >interface Web >tutoriel CSS >Comment désactiver la sélection de texte en CSS

Comment désactiver la sélection de texte en CSS

王林
王林original
2021-05-20 15:57:446974parcourir

La façon d'interdire la sélection de texte en CSS est d'ajouter l'attribut user-select et de définir la valeur de l'attribut sur none, ce qui signifie que le texte ne peut pas être sélectionné. Le code spécifique est comme [user-select:none. ;].

Comment désactiver la sélection de texte en CSS

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Dans un navigateur Web, si l'on double-clique sur le texte, le texte sera sélectionné ou mis en surbrillance. Et si on voulait interdire ce comportement ? C'est en fait très simple, utilisez simplement les propriétés suivantes.

L'attribut user-select précise si le texte de l'élément peut être sélectionné.

Dans un navigateur Web, si vous double-cliquez sur le texte, le texte sera sélectionné ou mis en surbrillance. Cette propriété est utilisée pour empêcher ce comportement.

Syntaxe :

user-select: auto|none|text|all;

Valeur de l'attribut :

  • auto par défaut. Le texte peut être sélectionné si le navigateur le permet.

  • aucun Empêcher la sélection de texte.

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

  • tous Cliquez pour sélectionner du texte au lieu de double-cliquer.

Le code d'implémentation est le suivant :

Côté PC :

.not-select{
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
}

Côté mobile :

.no-touch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Vidéo connexe partage : tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn