Hi, I am building an reservation form for a restaurant webpage, when I add the input=''time"
the clock icon to choose a time does not show in Firefox or Safari browser. Any suggestions on how to fix this?
Thanks
It’s a known issue that the time input field (<input type="time">) behaves differently across various browsers. In Firefox and Safari, you might not see the clock icon or the same UI elements that you do in browsers like Chrome or Edge.
To tackle this, one common approach is to use a JavaScript-based solution. You can implement a custom time picker using JavaScript libraries. Libraries like Flatpickr can help as they provide a consistent and customizable UI across all browsers. This method also allows you to add a clock icon (via a png icon or svg) or any other UI elements that you prefer.
Another alternative is to create a fallback for browsers that don’t support the time input as expected. This can be done by using a text input (<input type="text">) and then using JavaScript to validate the input or guide users to enter the time in a specific format. Though it may not be recommended since you need a consistent entry format for times especially for a reservation time.
I don’t think there isn’t a straightforward HTML or CSS fix due to the inherent browser compatibility issues from my knowledge.
2 Likes