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

© Copyright by JAYbranding – All rights reserved.

Chúng tôi mong muốn tư vấn chi tiết hơn cho quý khách.
Vui lòng nhập thông tin để nhận tự vấn