Chrome浏览器中HTML date类型input输入框左侧出现异常逗号求助

这个异常逗号是Chrome浏览器对type="date"的input输入框原生控件的本地化渲染特性导致的。当你的Chrome浏览器的系统/语言区域设置对应的短日期格式包含逗号分隔符时，Chrome会错误地在输入框最左侧额外渲染一个逗号，该问题仅出现在webkit内核浏览器中，Firefox采用不同的原生控件渲染逻辑因此不会复现。该逗号仅为展示层异常，不会影响输入框实际提交的value值，和你观察到的取值正常的情况一致。

问题出现的效果如下：

• 方案1：给date输入框指定明确的语言属性
  直接在input标签上添加lang属性，指定为无逗号短日期格式的地区即可修复，示例代码：

<input type="date" lang="zh-CN">

如果需要适配英文格式，可替换为lang="en-GB"等无逗号日期格式的地区编码。

• 方案2：通过CSS样式隐藏多余逗号
  如果不能修改lang属性，可以通过调整webkit专属伪元素样式屏蔽异常逗号：

/* 调整date输入框内部编辑区域偏移量，隐藏左侧多余逗号 */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  margin-left: -1ch;
  padding-left: 1ch;
}
/* 可选：统一内部日期分隔符的间距 */
input[type="date"]::-webkit-datetime-edit-text {
  padding: 0 3px;
}

• 方案3：完全重置原生控件样式（适合自定义设计需求）
  如果需要完全自定义date输入框的外观，可以先清除原生样式后自行编写样式，原生的日期选择弹窗功能依然可以正常使用：

input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

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