Guide to CSS text input properties: color, background-color, and border-color

CSS text input property guide: color, background-color and border-color

In web design, text input is a very important part. Through the CSS color, background-color and border-color properties, we can change the text color, background color and border color in the text input box. This article will introduce you to the use of these attributes and provide specific code examples to help you flexibly control the style of the text input box when designing web pages.

1. color property

The color property is used to set the color of text. Colors can be specified using hexadecimal values, RGB values, or a predefined color name.

Sample code:

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

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

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

2. background-color property

The background-color property is used to set the background color of the text input box. Background colors can also be specified using hexadecimal values, RGB values, or predefined color names.

Sample 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. border-color property

The border-color property is used to set the border color of the text input box. As with the previous two properties, the border color can be specified using a hexadecimal value, an RGB value, or a predefined color name.

Sample 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;  /* 设置边框为点线，颜色为酸橙色 */
}

Through the above sample code, you can flexibly customize the style of the text input box as needed. Of course, these properties are not only applicable to text input boxes, but also to other input elements, such as text fields, drop-down boxes, etc.

Summary:

Through the color, background-color and border-color properties of CSS, we can easily change the color, background color and border color of the text input box, thereby achieving more richness and diversity web design effect. I hope this article can help you and inspire you to create. If you have any questions or doubts, please feel free to ask us.

The above is the detailed content of Guide to CSS text input properties: color, background-color, and border-color. For more information, please follow other related articles on the PHP Chinese website!