CSS définir la zone de texte

Dans le développement Web, la zone de texte est un contrôle de saisie utilisateur courant. Grâce aux styles CSS, nous pouvons diversifier la zone de texte, notamment la couleur, la taille, la police, la bordure, etc. Dans cet article, nous vous présenterons en détail comment utiliser CSS pour définir des zones de texte afin de vous aider à créer des pages Web plus belles et plus pratiques.

1. Définir la taille de la zone de texte

Pour définir la taille de la zone de texte, nous pouvons utiliser les propriétés width et height en CSS. Par exemple, le code suivant définira la largeur de la zone de texte à 200 pixels et la hauteur à 30 pixels :

input[type="text"] {
    width: 200px;
    height: 30px;
}

De plus, nous pouvons également définir la taille maximale de la zone de texte en utilisant le paramètre max- propriétés width et max-height de CSS , pour garantir que la zone de texte s'adapte aux différentes tailles d'écran : #La couleur de la zone de texte est ce que nous embellissons. L'un des facteurs importants. Nous pouvons utiliser la propriété CSS background-color pour définir la couleur d'arrière-plan de la zone de texte et la propriété color pour définir la couleur du texte dans la zone de texte. Par exemple, le code suivant définira la couleur d'arrière-plan sur gris et la couleur du texte sur noir pour la zone de texte :

input[type="text"] {
    max-width: 100%;
    height:30px;
}

2. Définissez la police de la zone de texte

avec le texte La couleur de la zone est la même et la police est également l'un des facteurs importants pour embellir la zone de texte. Nous pouvons utiliser la propriété font-family de CSS pour définir la police du texte dans la zone de texte et la propriété font-size pour définir la taille de la police. Par exemple, le code suivant définira la police de la zone de texte sur Microsoft Yahei et la taille de la police sur 14 pt : Le réglage de la bordure du cadre est également l'un des facteurs importants pour embellir le cadre de texte. Nous pouvons utiliser la propriété CSS border pour définir le style, la largeur et la couleur de la bordure de la zone de texte. Par exemple, le code suivant définira la bordure de la zone de texte sur une ligne continue, une largeur de 1 pixel et une couleur grise : Bordures de coin pour augmenter l'esthétique de la zone de texte.

input[type="text"] {
    background-color: #ccc;
    color: #000;
}

3. Définir le style de focus de la zone de texte

Lorsque la zone de texte obtient le focus, nous pouvons définir différents styles pour qu'elle la distingue à partir d'autres zones de texte. Nous pouvons utiliser la pseudo-classe :focus de CSS pour styliser la zone de texte lorsqu'elle obtient le focus. Par exemple, le code suivant définira la couleur d'arrière-plan de la zone de texte sur jaune lorsqu'elle recevra le focus :

input[type="text"] {
    font-family: "Microsoft YaHei",Arial,sans-serif;
    font-size: 14pt;
}

4. Définir l'état désactivé de la zone de texte
#🎜🎜 #

In Dans certains cas, nous devons définir la zone de texte sur un état désactivé pour empêcher l'utilisateur de taper. Nous pouvons utiliser la pseudo-classe CSS :disabled pour définir le style désactivé de la zone de texte. Par exemple, le code suivant définira la couleur d'arrière-plan sur gris et la couleur du texte sur gris clair pour une zone de texte désactivée : Enfin, nous pouvons combiner les styles ci-dessus pour définir un style complet pour la zone de texte. Par exemple, le code suivant configurera entièrement une zone de texte :

input[type="text"] {
    border: 1px solid #ccc;
}

Dans cet article, nous expliquons en détail comment configurer une zone de texte à l'aide de styles CSS. Grâce à ces paramètres de style, nous pouvons rendre la zone de texte plus belle et plus pratique, et améliorer l'expérience utilisateur. J'espère que cet article pourra être utile pour votre travail de développement 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!