search

tailwindlabs / tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
https://tailwindcss-forms.vercel.app
MIT License
4.22k stars 223 forks source link

Fix text alignment on date and time inputs on iOS #144

Closed reinink closed 1 year ago

reinink commented 1 year ago

Currently date and time inputs on iOS are centered:

image

This PR updates these inputs to be left-aligned so that they are consistent with the rest of the form inputs:

image

The implementation

Changing the text alignment on the input itself doesn't work on iOS. The only way to fix this is using the -webkit-date-and-time-value pseudo element:

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

And while this totally works, it does come at the cost of users no longer being able to change the text alignment on date and time inputs using a utility class. However, they already couldn't on iOS, so this still feels like a good change.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwindcss-forms ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 22, 2023 1:02am
hailwood commented 1 year ago

Casual thought, what about creating a pseudo selector so we could do something like date-time:text-right if we wanted to?

adamwathan commented 1 year ago

Updated this to use inherit instead of left which means you can put a regular text-align utility on the input itself 👍 Hat-tip to @thecrypticace for the suggestion!