1 Mar 2022

Simple HTML date picker is showing not showing calendar icon!


My html date picker input[type="date"] is showing a triangle ▽ instead of calendar icon 📅.

I want to show png file instead of triangle icon. I tried this thread to improve calendar icon, but it doesn't seem very simple.

I haven't figured out a way to do that yet.



2 Mar 2022

Best Answer

best answer

Your html date input is given as below

<input type="date">

#Approach 1: Live Demo Link - Changing calendar icon using font-awesome icon library

input[type="date"]:before {
 color: transparent;
 background: none;
 display: block;
 font-size: 18px;
 font-family: 'FontAwesome';
 content: '\f073';
 /* This is the calendar icon in FontAwesome */
 width: 15px;
 height: 20px;
 position: absolute;
 top: 12px;
 right: 6px;
 color: #999;


#Approach 2: Live Demo Link - Changing calendar icon using image.

CSS Code:

input[type="date"]::-webkit-calendar-picker-indicator {
 color: rgba(0, 0, 0, 0);
 opacity: 1;
 display: block;
 background: url(// no-repeat;
 width: 20px;
 height: 20px;
 	border: 1px blue solid;
 border-width: thin;


This way you can overwrite your date picker, Hope it will work for you.



2 Mar 2022


Yes, Approach 1 about using Font-awesome looks good for me, thank you for sharing codepens, they are so helpful.

© 2024 Copyrights reserved for