How to change the clickable area of the <input type="time" /> from the icon to the shown time?

user_9422413 0
Viewed 1589

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?

input css html javascript
1 Answers

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%;
}
user_94224130
Related