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

Solution

Try following code:

[type="date"] {
  background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}


/* custom styles */

body {
  padding: 4em;
  background: #e5e5e5;
  font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

label {
  display: block;
}

input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
  width: 190px;
}

<div>
  <h1>PURE CSS DATE PICKER</h1>
  <label for="dateofbirth">Date Of Birth</label>
  <input type="date" name="dateofbirth" id="dateofbirth">
</div>

You can also try bootstrap datepicker: Bootstrap Datepicker

Comments

[BenM]

No, it is not possible unless you replace the native datepicker element with a JS version.

[Gaurav]

Try this link

[Abana Clara]

You can't. And even if you can, it will be vendor-specific. Input elements behave and look very differently depending on the company who makes them. It's much better to make your own Date Picker UI which will provide you all the flexibility that you need depending on how it's made, or you can find a library that does it for you..

[MJ_Wales]

Why the downvote without any comment??

[MJ_Wales]

@Gaurav Your answer has been the most useful, thanks. Will mark as accepted if you post it as a full answer.

[Gaurav]

@MJ_Wales I have uploaded full code.