I created a form field using:
<input type="date" required placeholder="Set a date">
On Safari and Chrome desktop, it behaves as expected. Safari shows the current date in grey by default, and Chrome displays a format hint like dd.mm.yyyy, which is perfectly fine.
On iOS, however, the field appears completely blank. I understand that the placeholder attribute is not part of the iOS date input behavior, which is technically fine. Still, it would be helpful if developers had the option to define a default display value. In the past, browsers prefilled date inputs, but many developers objected because they needed the field to be empty by default.
I have searched extensively and tried several AI tools, and everywhere it says that this cannot be changed. Am I missing something, or is there any way to display a placeholder, the current date, or some kind of visual hint in iOS Safari? Right now, the empty field creates poor UX because users may overlook it. Since the field is required, this can easily lead to validation errors and additional friction.
As a workaround, I used a CSS hack with input[type="date"]::before and a content attribute. I also added JavaScript to toggle a pseudo-placeholder value specifically for iOS.
Is there a cleaner solution that avoids this workaround?
Thanks in advance for your guidance.