Android端Chrome访问页面时input type=date显示空白无图标是什么原因

• CSS样式冲突：如果全局样式对input元素设置了-webkit-appearance: none/appearance: none，或者对input的color设为与背景一致的颜色、opacity设为0、内边距/高度设置为0，都会覆盖Chrome安卓端原生日期控件的默认样式，隐藏内置的日期选择图标和显示文本
• 低版本Chrome兼容性bug：70版本以下的安卓Chrome，在<input type="date">没有显式设置width或min-width属性时，会出现元素宽度被挤压为0的渲染异常，导致控件看起来完全空白
• 系统层面适配异常：安卓设备使用第三方定制主题、或者系统语言设置为非Chrome默认支持的小众语言时，会导致原生日期控件的资源加载失败，无法正常显示图标和默认占位符
• 父容器样式约束：input的父级元素如果设置了overflow: hidden且宽度不足，或者使用flex/grid布局时没有给input分配足够的展示空间，控件内容会被裁剪，仅显示空白背景

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