如何在Firefox中隐藏HTML date类型输入框的日历图标？

Chrome的方案仅针对WebKit内核浏览器生效，Firefox基于Gecko内核，需要用它专属的伪元素来处理：

/* 重置浏览器默认外观 */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 处理Chrome/Safari端的图标和微调按钮 */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* 关键：Firefox端隐藏日历图标 */
input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
}

/* 可选优化：如果隐藏图标后输入框右侧有多余留白，调整padding适配移动端 */
input[type="date"] {
  padding-right: 0.5em;
}

核心就是利用::-moz-calendar-picker-indicator这个Firefox专属伪元素，直接设置它不显示就能隐藏日历图标。如果调整后输入内容有截断问题，按需修改padding值即可，完全适配移动端场景。

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