Shilpa
Published in : 2022-03-01
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.
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;
}
Output:
#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(http://www.clipartbest.com/cliparts/9cz/67G/9cz67Gxgi.png) no-repeat;
width: 20px;
height: 20px;
border: 1px blue solid;
border-width: thin;
}
Output:
This way you can overwrite your date picker, Hope it will work for you.
Shilpa Date : 2022-03-02
Yes, Approach 1 about using Font-awesome looks good for me, thank you for sharing codepens, they are so helpful.
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now