Search code examples
htmlcssmobile-safari

Input placeholder spacing on mobile safari

UPDATE: Here's a link to a minimum reproducible bug. Instructions for running it are in the readme

I'm having issues with the bottom padding below an input placeholder on mobile safari. Here's what the input placeholder looks like on mobile safari:

enter image description here

Here's what the input placeholder looks like on Chrome:

enter image description here

As you can see there's a significant difference in the space between the placeholder text and the bottom border.

I've tried changing line-height as suggested by a few other stackoverflow answers and I've tried changing padding-bottom on the ::placeholder with appropriate vendor prefixes... I'm not sure what else there is to try.

Solution

  • I'd recommend not using line-height for inputs and buttons as it has major browser inconsistencies. Instead use height and padding to make elements the size you want, but in this case using margin should be sufficient once you remove the line-height property.