Search code examples
htmlcssinputdatepicker

Open html5 datepicker on input click

By default, the datepicker opens when the icon is clicked.

Now, i want the datepicker to appear when the input field is clicked. I can achieve this by enlarging the icon to 100% width, but i can't make it transparent, so there would be no icon at all but only the text visible...

I think i have seen solutions fro this the other day, but now, i did not find anything at all.

How can i get the desired effect? PS: A onFocus solution would be even better than onClick.

input#modified::-webkit-calendar-picker-indicator {
  width: 100%;
  margin: 0;
  border: 1px solid red;
  background: none;
}
Normal: only icon-click shows datepicker 
<input type="datetime-local" ><br>
Modified: click red outline for datepicker
<input type="datetime-local" id="modified">

Solution

  • This works for me. It is the answer that i had seen before but did not find.