This content originally appeared on Go Make Things and was authored by Go Make Things
A while back, I wrote about how a majority of the bugs I’ve run into while building Kelp UI have been Safari-related.
Today, I wanted to share another one, and how I fixed it: temporal inputs. Let’s dig in!
What are temporal inputs?
Temporal inputs is the fancy name for browser-native date-and-time-picker input types, like [type="date"] and [type="time"].
<label for="start">When will you arrive?</label>
<input type="date" id="start" name="start">
They’re awesome!
What Safari messes up
Safari renders the height and width of temporal inputs inconsistently compared to other browsers and other input types.
Broken width
In most browsers, <input> elements with [type="text"] and [type="date"] are the same height. If you style your <input> elements with width: 100%, both elements are the full width of their container.
input {
width: 100%;
}In most browsers, temporal inputs have a display property of inline-block, like all other inputs.
But in Safari, they have a display of inline-flex. In iOS 17, this property would ignore width: 100%.
Changing it to display: inline-block to match other input types results in random extra bottom padding, apparently a bug that’s been open for years. Using display: block has the same result.
Using display: flex addresses the issue, but also messes with the placement of the calendar and clock icons in other browsers.
Fortunately, iOS 18+ address the width: 100% issue with inline-flex, and will display them full-width. However, the display: inline-block / block extra padding issue persists.
Broken height
Under-the-hood, the temporal inputs use the shadow DOM to target each individual part of the date or time.
For example this…
<input type="date" value="2025-10-21">Is rendered in Safari like this…
<input type="date" value="2025-10-21">
#Shadow Content
<div useragentpart="-webkit-datetime-edit-fields-wrapper">
<div
useragentpart="-webkit-datetime-edit-month-field"
aria-label="month"
role="spinbutton"
aria-valuenow="10"
aria-valuetext="10"
>
10
</div>
<div useragentpart="-webkit-datetime-edit-text">/</div>
<div
useragentpart="-webkit-datetime-edit-day-field"
aria-label="day"
role="spinbutton"
aria-valuenow="24"
aria-valuetext="24"
>
24
</div>
<div useragentpart="-webkit-datetime-edit-text">/</div>
<div
useragentpart="-webkit-datetime-edit-year-field"
aria-label="year"
role="spinbutton"
aria-valuenow="2025"
aria-valuetext="2025"
>
2025
</div>
</div>
</input>Every browser renders this a little differently.
And in Safari, a lot of those [useragentpart] elements have their own padding that changes the height of temporal inputs in Safari relative to other <input> elements.
Fixing temporal input width in Safari
To address the inconsistent width, I give all input, textarea, and select a width of 100%.
input,
textarea,
select {
width: 100%;
}Then, I also add display: block to any of those elements that are not a temporal input using the :not() pseudo-selector.
/**
* @bugfix Required for proper width in Safari
* width: 100% is ignored by Safari unless display: block is set,
* but that messes up the vertical padding in temporal inputs.
* This let's temporal inputs keep their default inline-flex value.
*/
input:not(
[type="date"],
[type="time"],
[type="datetime-local"],
[type="month"],
[type="week"]
),
textarea,
select {
display: block;
}In iOS 17, the inputs do not display at 100% width.
That’s ok. This fits into Kelp’s ethos of progressive enhancement.
Fixing temporal input height in Safari
The good news about all of those shadow DOM parts is that webkit provides vendor-prefixed properties you can use to target them.
It’s poorly documented, but after some hunting around I found a list that seems to hit all of the existing combinations.
/**
* @bugfix Safari styles temporal fields with inconsistent inner padding
* This removes it, normalizing the fields with regular inputs
* @see https://github.com/cferdinandi/kelp/issues/235
*/
::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-meridiem-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
}I also target the calendar/clock icon, adjusting it’s height so that it doesn’t make the <input> bigger than necessary.
input::-webkit-inner-spin-button {
height: auto;
}Try it yourself
You can see all of this live in the browser over on the Kelp UI website.
Kelp is my UI library for people who love HTML, powered by modern CSS and Web Components. If you have any questions, let me know!
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-10-21T14:30:00+00:00) Fixing temporal input styling in Safari. Retrieved from https://www.scien.cx/2025/10/21/fixing-temporal-input-styling-in-safari/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.