HTML time input type - how to let select time menu view when clicking anywhere not only clock icon click

Question

I working on the time input type in HTML, my problem is when I click on the small clock icon on the right side of the input, the selectable time menu is viewed but I need to show it when I click anywhere on input.

I found this question but this does not solve my problem because it's about Timepacker, not HTML only.

show timepicker on click whole input type time HTML5 field not only on little clock icon

HTML :

  <label for="first" class="">{{__('From Hour')}}</label>
   <input type="time" class="form-control input-md"name="" id="from_hour" value="">

Answer 1

For me, adding onfocus="this.showPicker()" attribute on the time input solved the problem.

source: https://stackoverflow.com/a/72627382/10414071

Answer 2

This style works fine in my case:

input[type="time"] {
    position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: block;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: transparent;
}

Answer 3

Credit to @StepPen-codes at How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

You can use CSS to do the trick. It works but in my case, the calendar icon disappears. I try to bring it back but the position isn't nice.

input#session-date::-webkit-calendar-picker-indicator{
  display:block;
  top:0;
  left:0;
  background: #0000;
  position:absolute;
  transform: scale(12)
}