如何在Firefox > 108中为日期输入的日历图标设置样式？

Question

在旧版Firefox（直到109版），可以像在Chromium中一样选择日期选择器的图标：

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

这种方式已经不再可行，可以参考this Codepen。有人知道解决方法吗？

我的日期输入框有自定义图标，在新版本的Firefox中会显示两个图标。目前，我正在进行一些用户代理嗅探，并添加CSS类，以便我可以删除我的自定义图标：

    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

---

这个已报告的错误与您的问题相关吗？ - undefined

我不这么认为，但是在109版本发布之后，有一个bug被提出来了。 - undefined

我建议你通过将自定义图标定位在当前图标上方，并使用CSS样式pointer-events: none;来强制将其显示在屏幕上。 - undefined

That should be quite easy to keep in sync. - undefined

哦不，伪元素不是一个选项。 - undefined

你找到解决问题的办法了吗？我和你处于同样的境地... - undefined

Answer 1

我最终在Firefox选项中找到了访问Shadow DOM的方法：

在导航栏中访问选项：

about:config

之后：

devtools.inspector.showAllAnonymousContent true

然后重新启动浏览器。

我们因此找到一个：

button#calendar-button

但由于它位于影子 DOM 中，我还不知道如何定位它...

- Olivier C