The problem that Android phones and iPhone placeholder are not vertically centered

waiting now, how to solve

    height: 54px;
    line-height: 54px;

iPhone placeholder is normally centered vertically, while Android phone is on the upper side
iPhone cursor is not normal

Mar.15,2021

your situation is already very common. The mobile placeholder cannot be centered vertically. The main reason is that line-height is really not good on the mobile end, and the effect of centering is not good. It would be better to change it to padding. But padding is only a little better and still can't stand people with some obsessive-compulsive disorder. This is my own way to deal with this problem. The problem of

can be solved by changing the layout. Div simulates a 40-pixel input box, the height of the sub-element input is the same as the font size, and the background is transparent and borderless. At this point, input text and placeholder prompt text can be displayed in the middle, and Android phones, iPhones and computers, as well as normal pc browsers, will not move up or down.
Optimization problem: only when you click on input can you enter the cursor. At this time, you can do the click event for div to get the cursor for input, which can perfectly simulate the input input box.

Menu