< Back to Code

HTML5 default click input field to show calendar

Desktop only


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 Field click anywhere to show popup

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

.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;
}

vi

© Copyright by JAYbranding – All rights reserved.