HTML5 default click input field to show calendar

Desktop only

<hr>

Default Input Date Field - Click on icon

Normally, if we use HTML5 input date, we have to click on the icon to show calendar popup. <input type="date">

Input Field click anywhere to show popup

<input type="date"> <style> input[type="date"].field-enhance::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; } </style>

To show the calendar popup when click onto the input field, use the below:

<pre data-lang="CSS"><code>.input-container input { border: none; box-sizing: border-box; outline: 0; padding: .75rem; position: relative; width: 100%; } input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; }</code></pre>