Firefox中实现input type=date年月日聚焦背景色自定义的方法咨询

结论 #

目前Firefox浏览器没有提供和你所用的WebKit伪类完全等效的原生支持方案，无法直接单独选中日期输入框内的年/月/日单个字段修改聚焦状态样式。

具体说明 #

• Firefox对原生<input type="date">的内部结构样式暴露限制比Chrome严格很多，至今没有公开对应::-webkit-datetime-edit-day-field这类的Mozilla前缀伪元素，官方也没有给出相关的定制支持。
• 你最多只能实现整栏聚焦的样式调整，无法单独定位到选中的年月日部分：

/* 仅能修改整个输入框聚焦时的背景，无法单独适配单个字段 */
input[type=date]:focus {
  background-color: red;
  outline: none;
}

• 如果必须要在全浏览器实现单个日期字段聚焦改背景的效果，只能放弃原生日期输入组件，改用JavaScript实现的自定义日期选择器，自己封装年月日的输入逻辑和样式控制。

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