How to style an date input's calendar icon in Firefox > 108?

Question

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 know 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')
        })
    }

Calpe

Is this reported bug relevant to your issue? – Argillaceous

I don't think so, but there's this bug that was opened after the 109 release. – Calpe

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;. – Argillaceous

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. – Calpe

Oh no, the pseudo element is not an option. – Calpe

Did you find a solution to your problem? I'm in the same situation as you... – Houchens

Answer 1

I ended up finding in the Firefox options to access the shadow DOM:

Access options in the navigation bar:

about:config

After that:

devtools.inspector.showAllAnonymousContent true

Then restart the browser.

We therefore find a:

button#calendar-button

But since it is in the shadow DOM I don't yet know how to target it...

Houchens