iOS 15系统下如何让date类型输入框的文本左对齐？

iOS 15的Safari浏览器对date类型输入框做了内置样式封装，普通的text-align: left无法作用到输入框的Shadow DOM内部文本容器，因此会出现内容未填满时始终居中的问题。

可行CSS解决方案 #

• 方案1：覆盖webkit内置伪元素样式（最优方案，适配性最高）
  直接添加以下CSS规则即可生效：

/* 基础适配其他浏览器 */
input[type="date"] {
  text-align: left;
}
/* 针对iOS Safari的内部文本容器样式覆盖 */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  /* 清除默认左外边距偏移，可选 */
  margin-left: 0;
  /* 如仍不生效，可追加flex布局规则强制左对齐 */
  display: flex;
  justify-content: flex-start;
}

• 方案2：text-indent兜底方案
  如果伪元素方案在个别特殊场景下不生效，可以用text-indent强制控制文本左偏移量：

input[type="date"] {
  text-align: left;
  /* 可根据实际UI调整偏移数值 */
  text-indent: 3px;
}

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