Guide des propriétés de saisie de texte CSS : couleur, couleur d'arrière-plan et couleur de bordure

Guide des propriétés de saisie de texte CSS : couleur, couleur d'arrière-plan et couleur de bordure

Dans la conception Web, la saisie de texte est une partie très importante. Grâce aux propriétés CSS color, background-color et border-color, nous pouvons modifier la couleur du texte, la couleur d'arrière-plan et la couleur de la bordure dans la zone de saisie de texte. Cet article vous présentera l'utilisation de ces attributs et fournira des exemples de code spécifiques pour vous aider à contrôler de manière flexible le style de la zone de saisie de texte lors de la conception de pages Web.

1. attribut color

attribut color est utilisé pour définir la couleur du texte. Les couleurs peuvent être spécifiées à l'aide de valeurs hexadécimales, de valeurs RVB ou d'un nom de couleur prédéfini.

Exemple de code :

input[type=text] {
  color: #ff0000;  /* 设置文字颜色为红色 */
}

input[type=password] {
  color: rgb(0, 255, 0);  /* 设置文字颜色为绿色 */
}

input[type=number] {
  color: blue;  /* 设置文字颜色为蓝色 */
}

2. propriété background-color

propriété background-color est utilisée pour définir la couleur d'arrière-plan de la zone de saisie de texte. Les couleurs d'arrière-plan peuvent également être spécifiées à l'aide de valeurs hexadécimales, de valeurs RVB ou de noms de couleurs prédéfinis.

Exemple de code :

input[type=text] {
  background-color: #ffff00;  /* 设置背景色为黄色 */
}

input[type=password] {
  background-color: rgba(255, 0, 0, 0.5);  /* 设置背景色为半透明红色 */
}

input[type=number] {
  background-color: aqua;  /* 设置背景色为淡蓝色 */
}

3. attribut border-color

l'attribut border-color est utilisé pour définir la couleur de la bordure de la zone de saisie de texte. Comme pour les deux propriétés précédentes, la couleur de la bordure peut être spécifiée à l'aide d'une valeur hexadécimale, d'une valeur RVB ou d'un nom de couleur prédéfini.

Exemple de code :

input[type=text] {
  border: 1px solid #000000;  /* 设置边框颜色为黑色 */
}

input[type=password] {
  border: 2px dashed rgb(255, 0, 0);  /* 设置边框为虚线，颜色为红色 */
}

input[type=number] {
  border: 3px dotted lime;  /* 设置边框为点线，颜色为酸橙色 */
}

Avec l'exemple de code ci-dessus, vous pouvez personnaliser de manière flexible le style de la zone de saisie de texte selon vos besoins. Bien entendu, ces propriétés ne s'appliquent pas seulement aux zones de saisie de texte, mais également à d'autres éléments de saisie, tels que les champs de texte, les zones déroulantes, etc.

Résumé :

Grâce aux propriétés CSS color, background-color et border-color, nous pouvons facilement modifier la couleur, la couleur d'arrière-plan et la couleur de la bordure de la zone de saisie de texte, obtenant ainsi des effets de conception Web plus riches et plus diversifiés. J'espère que cet article pourra vous aider et vous inspirer à créer. Si vous avez des questions ou des doutes, n'hésitez pas à nous les poser.

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!