如何在Firefox中自定义日期选择器图标：隐藏默认图标与样式调整

针对你遇到的Firefox下无法隐藏默认日期选择器图标、自定义图标不生效、内边距导致图标偏移及悬停透明度无法移除的问题，直接给你可行的CSS方案：

核心CSS代码 #

/* 全局调整日期输入框内边距，避免文本被自定义图标遮挡 */
input[type="date"] {
  padding-right: 2.5rem; /* 根据自定义图标大小调整数值 */
  position: relative;
}

/* 隐藏WebKit内核浏览器（Chrome/Edge等）默认图标 */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 0.5rem;
  width: 1.5rem;
  height: 100%;
}

/* 隐藏Firefox默认图标并设置自定义图标 */
input[type="date"]::-moz-calendar-picker-indicator {
  background-image: url('你的自定义图标路径'); /* 替换为实际图标地址 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1 !important; /* 强制移除默认悬停透明度 */
  cursor: pointer;
  width: 1.5rem;
  height: 100%;
  padding: 0;
  border: none;
}

/* 移除WebKit内核下的悬停透明度变化 */
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0; /* 和初始隐藏状态保持一致 */
}

关键说明 #

• 你之前的CSS仅针对WebKit内核浏览器，Firefox需要使用::-moz-calendar-picker-indicator专属伪元素，这是问题核心
• 给输入框设置position: relative，配合WebKit伪元素的绝对定位，能让点击区域固定在右侧，不会随内边距偏移
• Firefox下直接替换默认图标的背景图，用opacity: 1 !important强制覆盖浏览器默认的悬停透明度效果
• padding-right的数值需根据自定义图标的宽度调整，确保输入文本不会被图标遮挡

完整HTML示例 #

<label for="Data di consegna" class="text-sm whitespace-nowrap text-gray-light-2">Delivery Date</label>
<input type="date" id="Data di consegna" class="你的输入框样式类">

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