Question about the center between input and select in IE browser !!!!, Inputselect

Question about the center between input and select in IE browser !!!!, Inputselect

The text in the input and select labels in the Google browser is auto-centered based on its height. The text in the input and select labels in the IE browser is not auto-centered based on height, I would like to share with you my solution. I am also a little white. Please give me more comments.

First, let's look at the effect of an input.

Line-height = "the height entered here must be the same as the input height", so that it can be centered up and down.

First, let's look at the effect of a select statement.

Set the top and bottom padding for padding.

Although he is already centered, the drop-down bar on the right also has an padding on the right. Obviously this is not a result we want,

Another way is to set a div on the outside and set the padding for the div, but the effect is the same,

Obviously, the above two methods are not what we want. If the page requirements are not very high, the above two methods are both convenient and simple. If the page requirements are relatively high, the above method cannot be used, and a better solution is needed to solve the problem.

This method is actually quite troublesome. To write a span and select in a div, the width and height of the two tags must be the same, and the two tags must be located together, set an opacity: 0 for the select tag, so that the select tag is completely hidden. We can only see a span box in the browser, and insert an image in this span as the drop-down arrow, the position on the right and the select drop-down arrow overlap, so that the use of span as a select, it is much easier to set the attributes of the span tag, we want to display the content of the select label in the span.

I don't know whether this method can be used or not. Please kindly advise me.