Placeholder text color on embed in a form on mobile devices

Design help Custom code
1

I have two simple embeds in my contact form to pick date and time for a restaurant reservation. It works flawlessly on computers, but for some strange reason the placeholder text in the date embed doesn’t appear on mobile devices. Every more strangely, the same issue doesn’t happen on the time field, which has the same class.

The form is on this page /reservasjon

I’ve tried adding CSS, but it didn’t work. Can anybody help me?

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

2

Could you share the .webflow.io staging domain for this site? As in the designer it all looks right but we can’t validate the custom embed in the designer itself :slight_smile:

Happy to have a look at the code that might be changing it.

Otherwise setting some hard CSS styles on the page might be a good option, as maybe it’s Safari on an iPhone acting up. (Just as a potential)

3

Of course! Here’s the link: Reservasjon

I also checked on Chrome on my iPhone to be sure, but same problem there.

4

Ah interesting, tapping on the date field causes the placeholder text to appear, and then it sticks around. But it doesn’t appear first off.

I’m a little stuck on this one hmmm, I’ll have a tinker and see if I can solve anything! Otherwise you may want to look at adding a “Date or reservation” label next to it on mobile to make it obvious what the blank space is for? Not a solution, but a teporary workaround perhaps?

I might recommend trying a custom date picker (like How to Add a Date Picker to your Webflow Form | Flowbase or Tailwind CSS Datepicker - Flowbite) to make sure that it is consistent across devices as well? This might fix it! (Not 100% sure sorry)