Skip to content

Instantly share code, notes, and snippets.

@CDT
Created March 6, 2023 01:09
HTML based Calendar. Normal html date input only pops up calendar when the rightmost icon is clicked, this one makes the calendar pop up when anywhere of the input is clicked
<input type="date">
<style>
.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;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment