如何实现移动端浏览器中input[type='date']输入日期左对齐

问题原因 #

你所遇到的现象不是CSS遗漏导致的，是移动端WebKit内核浏览器（含你测试的Safari、Chrome）的默认样式规则导致的：
input[type='date']属于原生替换元素，移动端浏览器会为它生成独立的shadow DOM结构承载日期展示内容，这部分结构的默认样式就是居中对齐，你给input元素本身设置的justify-content、text-align属性无法穿透作用到内部的shadow节点。

解决方案 #

新增针对WebKit内核date输入框专属伪元素的样式即可实现左对齐，修改后的CSS如下：

.container {
  display: flex;
  justify-content: center;
}
.date-input {
  height: 2rem;
  width: 300px;
}
/* 适配WebKit内核移动端浏览器的左对齐样式 */
.date-input::-webkit-datetime-edit {
  display: flex;
  justify-content: flex-start;
  padding: 0;
}
/* 可选：清除默认的边距避免左侧多余留白 */
.date-input::-webkit-datetime-edit-fields-wrapper {
  margin: 0;
  padding: 0;
}

上述写法兼容所有主流移动端WebKit内核浏览器，可直接生效。

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