Skip to content

Commit 8c9e976

Browse files
adamwathanAnton P
authored andcommitted
Normalize date/time input styles (tailwindlabs#14931)
This PR adds some additional styles to Preflight to normalize a bunch of inconsistencies in date/time inputs across browsers. The main motivation for this is to remove these insane classes we have to add in Catalyst: ```html <input type="date" class="[&::-webkit-datetime-edit-fields-wrapper]:p-0 [&::-webkit-date-and-time-value]:min-h-[1.5em] [&::-webkit-datetime-edit]:inline-flex [&::-webkit-datetime-edit]:p-0 [&::-webkit-datetime-edit-year-field]:p-0 [&::-webkit-datetime-edit-month-field]:p-0 [&::-webkit-datetime-edit-day-field]:p-0 [&::-webkit-datetime-edit-hour-field]:p-0 [&::-webkit-datetime-edit-minute-field]:p-0 [&::-webkit-datetime-edit-second-field]:p-0 [&::-webkit-datetime-edit-millisecond-field]:p-0 [&::-webkit-datetime-edit-meridiem-field]:p-0"/> ``` With these normalizations, changing things like padding, display type, etc. gives consistent results (at least as consistent as is actually possible) across all browsers.
1 parent 8f8813a commit 8c9e976

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

packages/tailwindcss/preflight.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,38 @@ progress {
244244
-webkit-appearance: none;
245245
}
246246

247+
/*
248+
1. Ensure date/time inputs have the same height when empty in iOS Safari.
249+
2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
250+
*/
251+
::-webkit-date-and-time-value {
252+
min-height: 1lh; /* 1 */
253+
text-align: inherit; /* 2 */
254+
}
255+
256+
/*
257+
Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
258+
*/
259+
::-webkit-datetime-edit {
260+
display: inline-flex;
261+
}
262+
263+
/*
264+
Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
265+
*/
266+
::-webkit-datetime-edit,
267+
::-webkit-datetime-edit-year-field,
268+
::-webkit-datetime-edit-month-field,
269+
::-webkit-datetime-edit-day-field,
270+
::-webkit-datetime-edit-hour-field,
271+
::-webkit-datetime-edit-minute-field,
272+
::-webkit-datetime-edit-second-field,
273+
::-webkit-datetime-edit-millisecond-field,
274+
::-webkit-datetime-edit-meridiem-field,
275+
::-webkit-datetime-edit-fields-wrapper {
276+
padding: 0;
277+
}
278+
247279
/*
248280
Add the correct display in Chrome and Safari.
249281
*/

0 commit comments

Comments
 (0)