Update ampm-field to meridiem-field

[pardeyke]

The wrong specifier was used so the actual fix was no applied.

::-webkit-datetime-edit-ampm-field -> ::-webkit-datetime-edit-meridiem-field

[mdo]

Do you have a reference to link for this change @pardeyke?

[pardeyke]

Documentation is really sparse on this. I could do a quick CodePen to demonstrate?!

[alpadev]

Not sure it helps but those seem to be the browser stylesheet's selectors.

For Chromium based

-webkit-datetime-edit-ampm-field
-webkit-datetime-edit-day-field
-webkit-datetime-edit-hour-field
-webkit-datetime-edit-millisecond-field
-webkit-datetime-edit-minute-field
-webkit-datetime-edit-month-field
-webkit-datetime-edit-second-field
-webkit-datetime-edit-week-field
-webkit-datetime-edit-year-field

Source: https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/themeInputMultipleFields.css#34

For Webkit based

-webkit-datetime-edit-year-field
-webkit-datetime-edit-month-field
-webkit-datetime-edit-day-field
-webkit-datetime-edit-hour-field
-webkit-datetime-edit-minute-field
-webkit-datetime-edit-second-field
-webkit-datetime-edit-millisecond-field
-webkit-datetime-edit-meridiem-field

Source: https://github.com/WebKit/WebKit/blob/bac6277a4d2263eb20960dd78a94e248482c8624/Source/WebCore/css/html.css#L540

A similar fix is also mentioned here: https://gomakethings.com/fixing-temporal-input-styling-in-safari/#fixing-temporal-input-height-in-safari

[pardeyke]

Ah @alpadev that makes sense. So we should keep both