Prior to version 109, Firefox allowed for the selection of the date picker's icon similar to Chromium:
input[type="date"]::-webkit-calendar-picker-indicator {
display: none; /* Hides the icon in Chrome and Firefox < v109 */
}
This functionality has since been removed, as shown in this Codepen. Is there a workaround available?
My date inputs feature custom icons and are displaying two icons in newer versions of Firefox. Currently, I am using user agent sniffing to add a CSS class that allows me to hide my custom icon:
const userAgent = navigator.userAgent;
const regex = /Firefox\/(?<majorRelease>\d+(\.\d+)?)/
const match = userAgent.match(regex)
const FirefoxVersion = match ? Number(match.groups.majorRelease) : null
if (FirefoxVersion > 108){
const inputs = document.querySelectorAll('.input[type="date"]')
inputs.forEach((el)=>{
el.classList.add('input-date-firefox-fix')
})
}