How to remove cross on date and time HTML inputs in Firefox
How do I hide the cross icon that automatically appears on date and time type HTML inputs?
eg.
<input type="time></input>
Shows with a cross like this.
I worked out how to do it for Chrome, but couldn't work out firefox.
Just want to remove that cross, preferably across all browsers.
Adding required
to the input works for me in both Chrome and Firefox:
<input type="time" required>
<input type="date" required>
I've done some research and found nothing so far. The best Solution I could come up with would be to clip the icon outside the input field and removing the border so it wouldn't look that bad. Here's what I mean:
input[type="time"]{
width:120px;
border: none;
clip-path: inset(0 17px 0 0);
outline:none;
outline:0;
}
<input type="time" required/>
Note, this is not a perfect solution. It might not even work for your case but I really didn't find anything else that could help you so I thought this might be worth sharing.