Chrome, FF, ie input the cursor element cannot be centered

Background input CSS style:

{            height:50px;width:386px;border:0;position:absolute;top:0;left:0; padding:0px;            line-height:50px;font-size:14px;.border-left-radius(4px);        }

 

You can try it. When Chrome is opened, the cursor appears in the upper left corner of the input element. Instead of centered as expected. The reasons for this are as follows:

• IE: The cursor height is consistent with font-size regardless of whether the row contains text.
• FF: When the row contains text, the cursor height is the same as font-size. When this row has no text, the cursor height is the same as the input height.
• Chrome: When the row has no text, the cursor height is the same as line-height; when the row has text, the cursor height ranges from the top of the input to the bottom of the text (both cases are when line-height is set). If line-height is not set, it is consistent with font-size.

Solution:

Set line-height to a relatively small value, and use padding to center the vertical direction:

{            height:50px;width:386px;border:0;position:absolute;top:0;left:0; padding:16px 0 16px 4px;            line-height:18px;font-size:14px;.border-left-radius(4px);        }

 

Chrome, FF, ie input the cursor element cannot be centered