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.

Answer 1

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>

Answer 2

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

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