How to change the appearance of input type="date" datepicker?

Question

I would like to change the default appearance of the input type="date" datepicker from an arrow to a calendar icon and make it visible at all times.

Google searching this issue revealed very little. I came across the below post from 2012 which says its not possible, have things changed?

https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Answer 1

Basically what i would do is wrap the input in a relative positioned div put the calendar icon with position absolute after the input

HTML:

<div class="date-input-wrapper">
      <input type="date" required />
      <img src="your_icon.svg">
      OR
      <i class="some-icon-font some-icon">
</div>

CSS:

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}