Input tags when writing CSS need to pay attention to some

Article Introduction: input label default style difference and its cross-browser design.

The search box at the top of the flying Fish's sonar gave me a headache for a long time because it was not always possible to get a unified style across browsers. There are two main questions: one is the height of input tags can not be unified, Firefox and IE in the height is always inconsistent; the second is in IE browser property for text input label text is not as vertical center as in standard browser, but by the upper left corner of the input box display.

To completely solve these problems with the search box, I rewrote the code and measured in pixels the actual difference between the <input> label in the default browser without any style sheet, based on the style of the Greengaint theme search box.

The results showed that the default height of 22 pixels (including the top and bottom border) is 146 pixels (including the left and right border) in Firefox and Safari when the input label is text, and the default height in IE is 24 pixels, The width is consistent with Firefox and Safari and is 146 pixels. When the input label is submit in type, the height in Firefox is 23 pixels (including shadows), and the width is 75 pixels. In Safari, height is 21 pixel, width is 73 pixels, height is 25 pixel in IE, width is 73 pixel.

So what should you pay attention to when styling input labels? Let's take a look at the following styling, a search box that has a good performance in different browsers.

Example

To sum up, in the input label to write CSS need to pay attention to the following points:

First, do not give the property of the input label text to set the height, so that the IE browser in the input box in the vertical center of the text to display. Even though you later want to center the text by setting the padding attribute, you will find it impossible to achieve consistent results in Firefox and IE. The correct approach is to set the Padding property directly to the Input tab, through the internal margin attribute to adjust the height of the input label, and then the text in IE is also centered.

Second, the input label does not inherit the font style and size of the parent element, you need to declare font-family and Font-size attributes directly to the input label.

Third, to the attribute text input label set appropriate width and padding properties to ensure that the text within the appropriate range. Especially when you use a background image, you want to make the text box the size of the background picture and the size, so that looks more beautiful.