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

Question

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.

Maybe duplicate with https://stackoverflow.com/questions/19655250/is-it-possible-to-disable-input-time-clear-button `input[type="time"]::-webkit-clear-button { display: none;}` — Tan Duong, Mar 28 '18 at 06:20
@TanDuong No, this is no duplicate. This answer works for chrome but not for FF — Tim Gerhard, Mar 28 '18 at 06:22

score 13 · Answer 1 · answered Apr 06 '20 at 05:53

13

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

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

answered Apr 06 '20 at 05:53

akmalmzamri

1,035
1
15
31

2

Yes that's true and a good tip, however my use case is when the fields ARE NOT required. I think this one is still unsolvable. Thanks for your insight though, much appreciated. – Evolve May 14 '20 at 06:03
Really sad there's no browser-specific psudo element you can hide with CSS. This did the trick for my use case and is definitely the cleanest if you situation allows you to do it. But I do see where this would not be applicable in some cases. – squarecandy May 13 '21 at 15:54

score 5 · Accepted Answer · answered Mar 28 '18 at 06:28

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.

Thanks for providing your workaround in detail. I'll award that as the answer at this stage. Really would like to find a less hacky approach though, I suppose just wait and see on this. — Evolve, Sep 13 '18 at 01:24

score 1 · Answer 3 · answered Jan 29 '19 at 03:08

1

I found another possible workaround. You can cover it up with another element. If you leave enough space at the end of the field, this looks fine in other browsers, too. Set the background color to whatever matches your field background. The position and z-index are required, or may be, depending on what kind of date selection solution you're using.

.moz-cover-clear {
 position: relative;
 z-index: 0;
 display: inline-block;
 left: -20px;
 top: 6px;
 width: 18px;
 height: 18px;
 background-color: white;
}

<input type="date"><i class="moz-cover-clear"></i>

answered Jan 29 '19 at 03:08

CSX321

347
2
4

Yeah it's a valid alternative hack, so I gave you an upvote. Still keen to have a proper solution for this, I suppose we all just wait and see. – Evolve Jan 30 '19 at 04:05
This is very likely to break based on the browser and OS. Currently it's broken in both Chrome and Firefox for me on Windows. – Zach Saucier May 10 '23 at 18:47
It's still working for me, using a negative margin-left instead of just "left". – CSX321 May 14 '23 at 22:58

score 1 · Answer 4 · answered Jan 22 '22 at 11:38

Good : it keeps the borders safe, no extra element

Bad : the background is clipped, too much hacky

input[type=time] {
  --bw: 2px;
  --a: calc(100% - var(--bw));
  --b: calc(var(--a) - 17px);
  border: var(--bw) solid #000;
  clip-path: polygon(0% 0%, 0% 100%,
                     var(--b) 100%, var(--b) var(--bw),
                     var(--a) var(--bw), var(--a) var(--a),
                     var(--b) var(--a), var(--b) 100%,
                     100% 100%, 100% 0%);

<input type="time" value="05:18" />

Container solution :

.time-container {
  display: inline-block;
  overflow:hidden;
  
  /* The styles you would give to your input */
  border: 2px solid #333;
  width: 65px;
}
.time-container input {
  width: calc(100% + 18px);
  border: none;
  background-color: transparent;
}

<div class="time-container">
  <input type="time" value="22:55"/></div>
</div>

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

4 Answers4

Linked