Notes when writing CSS with input tags

The search box at the top of the flying fish sonar gave me a long headache, because it was impossible to get a unified style across browsers. There are two main problems: first, the height of the input tag cannot be uniform, and the height of Firefox and IE cannot be consistent; second, the input text in the input label with the attribute text in IE browser is not vertically centered as in the standard browser, but is displayed in the upper left corner of the input box.

To completely solve these problems in the search box, I use the style of the GreenGaint topic search box as the standard, the code is rewritten and measured in pixels. The actual difference between the <input> label in the default browser without any style sheets is measured.

The result shows that when the input tag type is text, the default height in Firefox and Safari is 22 pixels (including the upper and lower borders) and the width is 146 pixels (including the left and right borders ), in IE, the default height is 24 pixels, while the width is the same as that in Firefox and Safari, which is also 146 pixels. When the input tag type is submit, the height in Firefox is 23 pixels (including Shadow), and the width is 75 pixels. In Safari, the height is 21 pixels, the width is 73 pixels, the height is 25 pixels in IE, and the width is 73 pixels.

So what should I pay attention to when styling input tags? First, let's take a look at the following style-based search box with good performance in different browsers.

Example

To sum up, pay attention to the following points when writing CSS to the input Tag:

1. Do not set the height for the input label whose attribute is text. In this way, text in the input box in IE cannot be vertically centered. Although you want to center the text by setting the padding attribute later, you will find that it cannot achieve the same effect in Firefox and IE. The correct method is to directly set the padding attribute for the input tag and adjust the height of the input tag through the padding attribute. In this case, the text in IE is also displayed in the center.

2. The input tag does not inherit the font style and size of the parent element. You must directly declare the font-family and font-size attributes for the input tag.

3. Set the appropriate width attribute and padding attribute for the input tag whose attribute is text to ensure that the text appears within the appropriate range. Especially when a background image is used, make the text box and the background image size the same, which looks more beautiful.