In Safari on macOS date time inputs that are set to display: block have unexpected extra bottom spacing.
This can be corrected by setting the ::-webkit-datetime-edit pseudo-element to display: inline-flex, instead of the browser default of display: inline-block.
I've tested this fix using date, datetime-local and time inputs on the following versions of MacOS Safari. (MacOS Safari currently does not support month or week.)
14.1 (Big Sur)
15.6 (Monterey)
16.5 (Ventura)
17 (Sonoma Beta)
I've also had a look at iOS Safari, but date time inputs render completely different there, so this doesn't have any effect at all in that browser.
Note
This issue was previously not noticeable in our playgrounds since they were running in quirks mode due to the lack of doctype in those demos. I've corrected that, and now this issue is visible in the playground (again, only on MacOS Safari): https://tailwindcss-forms.vercel.app
In Safari on macOS date time inputs that are set to
display: block
have unexpected extra bottom spacing.This can be corrected by setting the
::-webkit-datetime-edit
pseudo-element todisplay: inline-flex
, instead of the browser default ofdisplay: inline-block
.I've tested this fix using
date
,datetime-local
andtime
inputs on the following versions of MacOS Safari. (MacOS Safari currently does not supportmonth
orweek
.)I've also had a look at iOS Safari, but date time inputs render completely different there, so this doesn't have any effect at all in that browser.