How to remove cross on date and time HTML inputs in Firefox

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.


Adding required to the input works for me in both Chrome and Firefox:

<input type="time" required>
<input type="date" required>

Tags:

Html

Css

Firefox