If you’re using Elementor on your WordPress site and have run into issues with the styling the date and time labels on mobile, then you’re in luck. I’ve found a solution that worked for me, and I’m excited to share it with you.
The problem I encountered was that the date and time selector labels weren’t showing up on mobile browsers. Instead, all I could see was a dash. Not the most user-friendly experience for my website visitors, I must say.
So, after some experimenting, here is a quick and dirty CSS fix that worked like a charm.
input[type="date"]:before{
color:#383838;
content:attr(placeholder);
}
input[type="date"].full:before {
color:383838;
content:""!important;
}
input[type="time"]:before{
color:#383838;
content:attr(placeholder);
}
input[type="time"].full:before {
color:383838;
content:""!important;
}All you need to do is edit the form and go to the Advanced tab. Scroll down to the bottom, expand the custom CSS section, and paste in the code above. Don’t forget to adjust the code to match the styling of the other items in the form.
This simple fix made a huge difference in the user experience on my sites, and I hope it does the same for yours.
Hope this helps save someone else a little bit of time!