Maison > interface Web > tutoriel CSS > Comment rendre le contenu non sélectionnable en CSS

Comment rendre le contenu non sélectionnable en CSS

藏色散人
Libérer: 2021-04-02 14:33:56
original
2472 Les gens l'ont consulté

Comment rendre le contenu non sélectionnable en CSS : créez d'abord un nouveau fichier html ; puis utilisez la balise p pour créer un texte multiligne, et ajoutez un attribut de classe à la balise p ; via le style CSS "class (testpp)" et définissez l'attribut "user-select" sur none.

Comment rendre le contenu non sélectionnable en CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

Créez un nouveau fichier html, nommé test. html, pour expliquer comment utiliser CSS pour empêcher la sélection du contenu de la page.

Comment rendre le contenu non sélectionnable en CSS

Dans le fichier test.html, utilisez la balise p pour créer un texte multiligne pour les tests suivants.

Comment rendre le contenu non sélectionnable en CSS

Dans le fichier test.html, ajoutez un attribut de classe à la balise p pour définir le style CSS de la balise p via cette classe.

Comment rendre le contenu non sélectionnable en CSS

Dans le fichier test.html, écrivez la balise page Le style CSS sera écrit à l'intérieur de cette balise.

Comment rendre le contenu non sélectionnable en CSS

Dans la balise css, définissez le style CSS du texte de la page via la classe (testpp) et définissez l'attribut user-select sur none pour obtenir l'effet de désélectionner le contenu des pages.

Comment rendre le contenu non sélectionnable en CSS

L'attribut user-select peut être incompatible avec certains navigateurs de version inférieure. Par conséquent, vous pouvez ajouter des styles compatibles pour améliorer la compatibilité du code. Le code est le suivant :

Comment rendre le contenu non sélectionnable en CSS

Ouvrez le fichier test.html dans le navigateur pour voir l'effet.

Comment rendre le contenu non sélectionnable en CSS

Résumé :

1 Dans le style CSS, définissez l'attribut user-select sur none, afin que le contenu ne puisse pas être sélectionné.

2. Afin d'améliorer la compatibilité des styles, vous pouvez également utiliser "-webkit-user-select:none;-moz-user-select:none-ms-user-select:none;" style de contenu.

Apprentissage recommandé : "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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal