CSS Lire uniquement

«Comme nous le savons, le style CSS contient certains sélecteurs qui sont utilisés pour appliquer des propriétés spécifiques à des groupes d'éléments similaires. L'un de ces sélecteurs est un sélecteur en lecture seule qui a été largement connu pour l'application des propriétés CSS sur les éléments qui ne sont pas écrivains, je.e., ne peut pas être modifiable. En d'autres termes, il ne serait utilisé que pour les éléments en lecture seule appartenant aux éléments de type «entrée» de HTML. Dans cet article aujourd'hui, nous allons jeter un œil au sélecteur CSS Readonly dans le script HTML avec quelques exemples."

Exemple 01

Commençons par le premier exemple de l'utilisation des attributs en lecture CSS dans le code HTML. Nous avons commencé ce premier exemple avec le format standard des balises HTML. À partir de la balise d'ouverture HTML, il a suivi l'ouverture de la balise de tête et de style. Dans la balise de style, nous avons stylé le corps de notre page HTML. Pendant un moment, jetons un coup d'œil au corps de ce code HTML en premier. Nous avons ajouté un total de 2 paragraphes dans le corps de page Web HTML. Les paragraphes contiennent des textes simples en leur sein. Les deux ouvertures de paragraphe sont suivies par leur texte,
Tag pour ajouter une rupture de lien dans la page Web et la balise pour ajouter des éléments d'entrée à la page Web.

Les deux balises d'entrée contiennent l'attribut «Valeur» avec la valeur «lire et écrire la zone de texte» et la «zone de texte en lecture seule». De plus, la deuxième balise d'entrée du deuxième paragraphe contient l'attribut «en lecture seule». Après cela, les deux balises d'entrée contiennent le style en ligne via la balise de style qui y est utilisée. Les deux zones de texte d'entrée seront de 30px de hauteur et de 250px de largeur. Les balises de paragraphe sont fermées ici, ainsi que la balise corporelle du code HTML. Dans la balise de style, nous avons stylé la balise du paragraphe qui contient le titre en lecture seule, je.e., deuxième zone de texte. L'arrière-plan de la zone de texte en lecture seule a été défini sur Orange-Red. Ceci est à propos du style et de la tag de la tête. Ce code est maintenant complet et prêt à être exécuté sur le navigateur Chrome via le code Visual Studio.

Après l'exécution de ce code, nous avons obtenu les deux zones de texte avec deux paragraphes sur le nouvel onglet de notre navigateur. La première zone de texte est la zone de texte Read and Writs, I.e., Vous pouvez écrire dessus et lire tout ce que vous avez écrit. D'un autre côté, la zone de texte orange-rouge en lecture seule ne peut être vue et n'est pas modifiable.

Exemple 02

Commençons par un autre exemple de HTML pour créer des éléments en lecture seule en utilisant le style CSS. Dans ce code, nous avons ajouté la même balise avec la balise, suivie par la tête principale et les balises corporelles. La balise corporelle de ce code simple contient un texte simple en lui sans utiliser de balise. Après ce texte, nous avons utilisé la balise pour créer des éléments dynamiques comme la zone de texte dans notre page Web HTML. Cette zone de texte d'entrée a été classée avec la classe «DisablePointerevents». L'élément d'entrée a été nommé «entrée» avec la valeur «Texte en lecture seule». Le style en ligne a été utilisé pour définir la hauteur de 30px et la largeur de 250px pour cette zone de texte.

Le corps de notre page HTML est maintenant terminé, et nous allons regarder la balise de style de ce code HTML maintenant. Nous utilisons la classe «DisablePointerevents» de la balise «d'entrée» pour le styliser. Les événements de pointeur de propriété ont été définis sur aucun. La couleur d'arrière-plan de la zone de texte a été définie sur hotpink. Il s'agit du style de la page Web HTML. Enregistrons et exécutons-le dans le code Visual Studio suivi du navigateur.

Après avoir exécuté ce code, l'onglet du navigateur nous montre le texte simple suivi de la zone de texte rose. Après avoir cliqué sur la zone de texte de la zone de texte, nous ne pouvons rien écrire. En effet.

Exemple 03

Jetons un œil aux derniers mais non les moindres exemples de cet article. Dans cet article, nous ferons un élément écrivable tandis que l'autre est lu en utilisant certaines propriétés. Ce script HTML a été démarré avec la balise HTML suivie par la balise de tête contenant une longue liste de propriétés de style dans sa balise de style. L'étiquette corporelle de ce script HTML contient la propriété «Fieldset» ici, regroupe les éléments similaires en un seul ensemble et les styles en conséquence. Cet élément de champ contient la tag de légende et la balise div. Nous utilisons les propriétés contenues définies sur «vrai» pour cette balise, je.e., Sa légende serait modifiable et a utilisé la légende «Informations sur la commande de la commande client».

La balise DIV contient une nouvelle textarea qui sera identifiée par l'ID «C_Address» suivie de son nom «C_Address», et nous l'avons réglé en lecture seule. Cette zone de texte contient des informations textuelles à l'intérieur qui ne sont que des lectures et ne peuvent pas être modifiables. La balise TextArea avec le conteneur Div a été terminée ici. Nous avons également fermé la balise du champ ici, je.e., qui maintient la section div à l'intérieur. Le corps de notre page HTML a été achevé ici, nous avons donc fermé le corps et la balise HTML.

La balise de style de la balise de tête principale a utilisé de nombreuses propriétés pour les éléments du corps. Nous avons établi la largeur, les marges et la famille de polices de tout le corps de cette page HTML via l'utilisation du mot-clé «corps». Le rembourrage et les marges ont été définis pour l'élément Fieldset, i.e., contenant d'autres éléments en lui-même. L'élément de légende a utilisé une propriété de couleur pour définir la couleur d'une légende sur le blanc avec l'arrière-plan noir et un rembourrage également. L'élément de conteneur Div intérieur est utilisé pour définir ses marges, afficher et justifier la propriété. L'élément TextArea dans ce conteneur a été conçu avec l'utilisation de l'affichage, de la famille, de la taille de la police, de la taille de la boîte, du rembourrage, de la largeur, de l'utilisateur, de la hauteur et des propriétés de redimensionnement.

La propriété utilisateur-sélection.e., Boîte non modifiable ni résidante. Le décalage de survol et de mise au point a été utilisé pour que TextArea utilise un fond de couleur blanche sur le plan de planage et de concentration. Pour les balises en lecture seule de TextArea, nous avons réglé Box-Shadow à None et Couleur d'arrière-plan en blanc avec 0 Borders. C'est tout sur ce code. Exécutons-le maintenant.

La sortie affiche le champ avec la légende «Informations sur l'expédition des commandes du client» ainsi qu'un conteneur contenant un texte dans son TextArea.

Vous pouvez voir que la légende du champ est modifiable, tandis que le texte peut être copié et n'est pas modifiable.

Conclusion

Le paragraphe d'introduction de cet article est une question d'utilisation du sélecteur CSS Readonly dans les codes HTML et explique son utilisation. Parallèlement à cela, nous avons discuté d'un total de trois exemples différents pour rendre un élément simple une lecture seule via l'utilisation de différentes propriétés sur l'utilisation d'un sélecteur en lecture, je.e., Détexe en lecture, utilisation de la propriété Pointer-Events et utilisation d'une valeur de décalage satisfaistable dans la balise d'élément particulière.