为何Firefox会改变我的Bootstrap日期选择器样式？

问题情况 #

这段日期输入框代码在Chrome、Edge里显示正常，但到Firefox中就变成了深色样式：

<input class="form-control" type="date" min='1900-01-01' name="birthDate" id="birthDate" required>

原因 #

Firefox对原生日期输入控件的默认样式和Chrome、Edge存在差异，尤其是背景色与文字颜色的默认取值，导致呈现出深色外观。

解决办法 #

通过自定义CSS覆盖Firefox的默认样式，即可和其他浏览器保持一致：

方案1：统一基础样式 #

添加以下CSS代码，调整输入框的背景、文字颜色，对齐其他浏览器的显示效果：

/* 调整Firefox日期输入框样式 */
input[type="date"] {
  background-color: #fff; /* 设置白色背景 */
  color: #333; /* 设置深色文字 */
  border: 1px solid #ced4da; /* 匹配form-control的边框样式 */
}

/* 可选：调整日历选择图标颜色，适配浅色背景 */
input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(0.5);
}

方案2：仅针对Firefox设置 #

使用Firefox专属的CSS前缀，只修改Firefox下的样式，不影响其他浏览器：

@-moz-document url-prefix() {
  input[type="date"].form-control {
    background-color: #fff;
    color: #333;
    padding: 0.375rem 0.75rem; /* 和form-control的内边距匹配 */
  }
}

补充说明 #

如果使用的是Bootstrap框架，form-control类已经自带边框、内边距等基础样式，只需补充背景色和文字颜色的覆盖即可；也可以根据项目主题色调整具体的颜色取值。

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