zone de texte CSS en lecture seule

Dans la conception de sites Web, nous utilisons souvent des zones de texte pour enregistrer les informations saisies par les utilisateurs. Dans certains cas, nous espérons que cette zone de texte ne pourra être utilisée que pour afficher des informations et ne pourra pas être modifiée. Pour le moment, vous devez utiliser la propriété CSS en lecture seule.

En HTML, nous utilisons généralement des balises d'entrée pour créer des zones de texte. Parmi eux, l'attribut type peut définir le type de zone de saisie, tel qu'une zone de texte, une zone de mot de passe, un e-mail, etc. Pour rendre une zone de texte en lecture seule, nous devons définir la propriété readonly sur true. Voici un exemple :

Dans le code ci-dessus, la valeur de la zone de texte est "johndoe" et l'attribut en lecture seule est défini à vrai, c'est-à-dire le statut en lecture seule.

Voyons maintenant comment créer une zone de texte en lecture seule via CSS. Tout d’abord, nous devons rechercher l’élément d’entrée dans le HTML, puis utiliser le sélecteur d’attribut pour sélectionner la zone de texte en lecture seule. Les sélecteurs d'attributs peuvent sélectionner des éléments en fonction de leurs valeurs d'attribut. La syntaxe est attribut=valeur. Par exemple, pour sélectionner une zone de texte en lecture seule, nous pouvons utiliser le code suivant :

input[readonly] {

background-color: #eee;

}

Le code ci-dessus définira la couleur d'arrière-plan de tous les éléments d'entrée avec l'attribut readonly sur gris. . Si vous souhaitez uniquement sélectionner un type spécifique de zone de texte, vous pouvez écrire comme ceci :

inputtype="text" {

background-color: #eee;

}

Cela sélectionnera tous les éléments d'entrée dont l'attribut type est "text" et l'attribut en lecture seule est vrai, et définissez leur couleur d'arrière-plan sur gris. Si vous souhaitez limiter davantage la sélection, vous pouvez utiliser d'autres sélecteurs, tels que des sélecteurs de classe ou d'ID.

En plus de changer la couleur d'arrière-plan, vous pouvez également utiliser d'autres styles CSS pour afficher des zones de texte en lecture seule. Par exemple, vous pouvez modifier la couleur, les bordures, la police, etc. de la zone de texte. Voici quelques styles courants de zone de texte en lecture seule :

/ Rendre la zone de texte non modifiable /
input[readonly] {

-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;

}

/ Supprimer la bordure de la zone de texte /
input[readonly] {

border: none;

}

/ Changez la couleur d'arrière-plan, la couleur et la taille de la police de la zone de texte/
input[readonly] {

background-color: #f0f0f0;
color: #333;
font-size: 14px;

}

En bref, en utilisant la propriété en lecture seule du CSS, vous peut facilement définir la zone de texte sur le statut Lecture seule pour garantir que les informations saisies par l'utilisateur ne sont pas modifiées. En ajustant le style CSS, nous pouvons également modifier l'effet d'affichage de la zone de texte pour la rendre plus cohérente avec le style de conception du site Web.

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!