如何修改HTML Date picker弹出框的背景颜色？

可以通过基础CSS修改输入框本身的背景，对于浏览器自带的下拉选择面板，则需要针对不同内核的浏览器使用对应的伪元素来调整：

1. 基础输入框样式修改 #

直接为input[type="date"]设置背景色，同时可搭配文字颜色、内边距等样式优化展示效果：

input[type="date"] {
  position: absolute;
  background-color: #f0f8ff; /* 替换为你需要的颜色值 */
  color: #333;
  border: 1px solid #ddd; /* 可选，自定义边框 */
  padding: 8px 12px;
}

2. Webkit内核浏览器（Chrome/Edge/Safari）下拉面板调整 #

这类浏览器需要使用特定的伪元素来修改下拉选择面板的样式：

/* 修改下拉面板的背景色与边框 */
input[type="date"]::-webkit-calendar-picker-panel {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

/* 调整日期选择器触发图标的颜色，适配新背景 */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.4);
}

/* 移除默认的上下箭头控件（可选） */
input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

3. Firefox浏览器下拉面板调整 #

Firefox需要使用-moz-前缀的伪元素，或通过重置默认外观来适配：

input[type="date"] {
  appearance: none;
  -moz-appearance: none;
  position: absolute;
  background-color: #f0f8ff;
  color: #333;
  padding: 8px 12px;
}

/* 修改Firefox下拉面板背景 */
input[type="date"]::-moz-calendar-picker {
  background-color: #e6f7ff;
}

注意：不同浏览器的伪元素支持存在差异，建议在目标浏览器中测试样式效果，同时确保文字与背景的对比度符合可读性要求。

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