css set text box

In web development, the text box is a common user input control. Through CSS styles, we can diversify the text box, including color, size, font, border, etc. In this article, we will introduce you in detail how to use CSS to set text boxes to help you build more beautiful and practical web pages.

1. Set text box size

To set the size of the text box, we can use the width and height properties in CSS. For example, the following code will set the width of the text box to 200 pixels and the height to 30 pixels:

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

Additionally, we can also set the maximum size of the text box using the max-width and max-height properties of CSS to Ensure that the text box adapts to different screen sizes:

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

2. Set the text box color

The color of the text box is one of the important factors in our beautification. We can use the background-color property of CSS to set the background color of the text box, and the color property to set the color of the text in the text box. For example, the following code will set the background color of the text box to gray and the text color to black:

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

3. Set the text box font

The same as the color of the text box, the font It is also one of the important factors in beautifying text boxes. We can use the CSS font-family property to set the font of the text in the text box, and the font-size property to set the font size. For example, the following code will set the font for the text box to Microsoft Yahei and the font size to 14pt:

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

4. Setting the text box border

The setting of the text box border is also text One of the important factors in frame beautification. We can use the CSS border property to set the style, width, and color of the text box border. For example, the following code will set the border of the text box to a solid line, a width of 1 pixel, and a color of gray:

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

In addition, we can also use the CSS border-radius property to set the rounded border of the text box , to increase the aesthetics of the text box.

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

5. Set the focus style of the text box

When the text box gets focus, we can set different styles for it to distinguish it from other text boxes. We can use CSS's :focus pseudo-class to style the text box when it gets focus. For example, the following code will set the background color to yellow when the text box receives focus:

input[type="text"]:focus {
    background-color: yellow;
}

6. Set the disabled state of the text box

In some cases, we The text box needs to be set to a disabled state to prevent the user from typing. We can use the CSS :disabled pseudo-class to set the disabled style of the text box. For example, the following code will set the background color to gray and the text color to light gray for a disabled text box:

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

7. Comprehensive style settings

Finally, we can change the above Styles are combined to set a complete style for the text box. For example, the following code will fully set up a text box:

input[type="text"] {
    width: 200px;
    height: 30px;
    padding: 5px 10px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14pt;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="text"]:focus {
    background-color: #fff;
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.6);
}

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

In this article, we explain in detail how to set up a text box using CSS styles. Through these style settings, we can make the text box more beautiful and practical, and improve the user experience. I hope this article can be helpful to your work in web development.

The above is the detailed content of css set text box. For more information, please follow other related articles on the PHP Chinese website!