5

In older versions of Firefox (until 109), it was possible to select the date picker's icon like in Chromium:

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none; /* Hides the icon in Chrome and Firefox < v109 */
}

It's no longer possible that way, see also this Codepen. Does anyone now a workaround?

My date inputs have custom icons and now show two of them in the newish Firefox versions. For now, I'm doing some user agent sniffing and add a CSS class so I can remove 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')
        })
    }
kslstn
  • 1,407
  • 1
  • 14
  • 34
  • Is this [reported bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1811554) relevant to your issue? – Rojo Mar 27 '23 at 12:58
  • I don't think so, but there's [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1812397) that was opened after the 109 release. – kslstn Mar 27 '23 at 15:44
  • I suggest you brute force your custom icon onto the screen by positioning it over the current icon and use the CSS style `pointer-events: none;`. – Rojo Mar 27 '23 at 19:12
  • Yeah, that requires that the custom icon has a background color covering the default icon. Because my input field changes color upon focus, this is messy to implement. Although, maybe I can add a pseudo element to cover the original icon with the input's background color. That should be quite easy to keep in sync. – kslstn Mar 28 '23 at 07:51
  • Oh no, the [pseudo element is not an option](https://stackoverflow.com/a/4660434/1171638). – kslstn Mar 28 '23 at 08:03

0 Answers0