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
Try following code:
HTML
<div>
<h1>PURE CSS DATE PICKER</h1>
<label for="dateofbirth">Date Of Birth</label>
<input type="date" name="dateofbirth" id="dateofbirth">
</div>
CSS
[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;
}
You can also try bootstrap datepicker: Bootstrap Datepicker
Basically what i would do is wrap the input in a relative positioned div put the calendar icon with position absolute after the input
HTML:
<div class="date-input-wrapper">
<input type="date" required />
<img src="your_icon.svg">
OR
<i class="some-icon-font some-icon">
</div>
CSS:
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
display: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.