如何为Firefox 108以上版本设置日期输入框的日历图标样式？

问题背景 #

在Firefox 109及更早版本中，我们可以用和Chromium浏览器一致的CSS伪元素隐藏日期输入框的默认图标：

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none; /* 在Chrome和Firefox < v109中隐藏图标 */
}

但这个写法在Firefox 109之后的版本里失效了。如果你的日期输入框已经自定义了图标，新版本Firefox会同时显示默认图标和自定义图标，造成视觉冲突。

替代方案（优先避免用户代理嗅探） #

方案1：用Firefox专属伪元素隐藏默认图标 #

Firefox 109+提供了专属伪元素::-moz-date-picker，直接用它就能隐藏默认图标：

/* 针对Firefox 109+隐藏默认日期选择器图标 */
input[type="date"]::-moz-date-picker {
  display: none;
}

/* 可选：给自定义图标预留右侧空间，避免点击区域重叠 */
input[type="date"] {
  padding-right: 2rem;
}

方案2：完全自定义日期输入框样式 #

如果需要彻底控制输入框外观，可以重置原生样式，通过容器或伪元素实现自定义图标：

/* 重置原生日期输入框的默认外观 */
input[type="date"] {
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ddd;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  position: relative;
  cursor: pointer;
}

/* 添加自定义图标 */
input[type="date"]::after {
  content: "📅";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 不干扰输入框的点击交互 */
}

/* 隐藏Firefox默认组件 */
input[type="date"]::-moz-date-picker {
  display: none;
}

关于用户代理嗅探的优化（不推荐但可用） #

你当前通过JS嗅探UA并添加CSS类的方法，存在UA伪装、版本解析出错等风险。如果一定要保留这个方案，可以优化代码逻辑：

const userAgent = navigator.userAgent;
const regex = /Firefox\/(\d+)/;
const match = userAgent.match(regex);
const firefoxVersion = match ? parseInt(match[1], 10) : null;
if (firefoxVersion && firefoxVersion > 108) {
  document.querySelectorAll('.input[type="date"]').forEach(el => {
    el.classList.add('input-date-firefox-fix');
  });
}

内容的提问来源于stack exchange，提问作者kslstn