HTML input type text text field background color and background image design

 In the previous section, we introduced the text color modification, border color, border style and other modification techniques of the input type text text field. This article will enter to modify the background color of the input type text text field and the background image modification skills. The two properties of CSS background are obtained, namely background-color and background-image.

Modify the background color of the HTML input type text text field

<input type="text" style="background-color:pink;" value="pink field background"> 
<input type="text" style="background-color:yellow;" value="yellow Field background"> 
<input type="text" style="background-color:lightgreen;" value="light green field background"> 

Sample output

    

Create three text input fields with different background colors through the background-color of css . background-color:pink ​​is a pink background, and then yellow and light green in sequence. These background colors can be selected through the color code table . For more detailed background color design techniques, please refer to: CSS background-color background color .

Modify the background image of the HTML input type text text field

<input type="text" style="background-image:url(image URL);width:300px;height:30px;" value="modify the background image of the text field">

Sample output

Modifying the background image of a text field is not as simple as modifying the background color. In order to make the image fit the size of the field perfectly, the width and height of the field must be fixed first. In this example, the width is set to 300px (width: 300px;), the height is set to 30px (height: 30px), and the size of the image to be used as the background is the same. The background image can be added to the text field through the background-image of css. For more detailed usage, please refer to: CSS background-image background image .