2

I wonder, how I could hide the clock icon from the <input type="time" /> but still be able to click on the shown time to change the current time?

Like in this developer.mozilla example: LINK

There is this picture:

enter image description here

the clock is shown. And when I click on it, I can choose a time, like here:

enter image description here

What I would like to achieve, is to hide the clock icon and be able to choose a time when I click on the -- : -- on the left from the icon.

To hide the icon, I can simply write

input[type='time']::-webkit-calendar-picker-indicator {
    background: none;
    display: none;
}

But then it is not clickable. Of course, if I comment out the display: none I can still choose the desired time, but I achieve it by clicking on the empty space right to the -- : --.

Any idea how to solve my problem?

Dariusz Legizynski
  • 362
  • 5
  • 22

1 Answers1

1

Ok, I solved it.

Just added:

opacity: 0;
position: absolute;
width: 10%;
left:35%;

to the input[type='time']::-webkit-calendar-picker-indicator

so it is now

input[type='time']::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    width: 10%;
    left:35%;
}
Dariusz Legizynski
  • 362
  • 5
  • 22
  • 1
    Works well, hacky solution, you can try to use Javascript time picker next time. Check [this](https://stackoverflow.com/questions/468253/whats-a-good-javascript-time-picker) out for future reference if it may help. – NcXNaV Jul 14 '21 at 19:15
  • Yes, it is hacky, but this is what I got. Maybe you are right to choose a date picker as a solution. – Dariusz Legizynski Jul 14 '21 at 19:26