HTML input type text text size, font and padding

 HTML input type text text size, font and padding can be modified through CSS, so that the text input field (input type text) presents a more beautiful style, instead of the most primitive monotonous text input field, the following is the text The independent settings of size, font, and padding are for example reference. If you want to understand the syntax of text input fields, please refer to: HTML input text explanation. Let's start our example.

Modify HTML input type text text size

<input type="text" style="font-size:12px" value="Modify text size to 12px"><br>
<input type="text" style="font-size:16px" value="Modify text The size is 16px"><br>
<input type="text" style="font-size:20px" value="Modify the text size to 20px">

Example output





The syntax of CSS to control text size is font-size. The example uses font-size to set text of different sizes, 12px, 16px, 20px. As the number increases, the text becomes larger and larger. For more information about the text size design, please refer to : CSS font-size text size .

Modify HTML input type text font

<input type="text" style="font-family:serif;" value="Modify the font to serif"> 
<input type="text" style="font-family:DFKai-sb;" value= "Modify the font to standard regular font"> 
<input type="text" style="font-family:Microsoft JhengHei;" value="modify the font to Microsoft JhengHei">

Example output

    

CSS controls the font of the text font-family. In this example, three different fonts are used. The first type of serif is a universal font, while the second type of standard italics and the third type of Microsoft regular bold are special Fonts, operating systems other than Windows may have no effect, unless the user has installed these fonts on the computer. For more information about CSS font settings and the selection of universal fonts, please refer to: CSS font-family font .

Modify HTML input type text field spacing

<input type="text" style="padding:5px;" value="modify the padding to 5px"><br>
<input type="text" style="padding:10px;" value="modify the padding to 10px">

Example output




The syntax of CSS to control the inner margin of the container is padding. In this example, we set padding: 5px and padding: 10px for comparison. It can be seen that the larger the inner margin, the distance between the text and the field border. The farther you go, for detailed usage of padding , please refer to: CSS padding padding properties and usage examples .

Integration written

above three examples together it? Of course you can. For example, if we want to write a text input field with a text size of 13px, a font of serif and an inner margin of 6px, we can write this way.

<input type="text" style="font-size:13px;font-family:serif;padding:6px;" value="modify the text field integration writing method">

Output result



As long as the syntax of each different attribute is separated by a semicolon (;), it can be integrated. Isn't it very simple?