Chrome移动端HTML5 input type date不显示placeholder的原因排查

这个问题我做项目时也碰到过，结合你的代码和Chrome版本，来拆解下核心原因和解决办法：

核心原因 #

• 原生date控件的规范限制：HTML5的input[type="date"]属于系统原生控件，不同平台浏览器对它的属性支持差异很大。Chrome桌面端为了优化体验，额外兼容了placeholder的显示，但移动端Chrome（尤其是你用的65.0.3325.109这个较老版本）严格遵循W3C规范——原生date控件本身不需要placeholder，它会根据系统本地化设置显示默认日期格式提示（比如部分地区显示mm/dd/yyyy），所以直接忽略了你设置的placeholder值。
• pattern属性的干扰：你设置的pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"是针对文本输入的格式验证，但原生date控件在移动端会唤起系统自带的日期选择器，用户选择后自动生成符合ISO规范的日期值，这个pattern属性对原生控件的显示逻辑没有帮助，反而可能让老版本Chrome移动端进一步忽略placeholder设置。

可行的解决办法 #

1. 用伪元素模拟占位符 #

因为原生控件不支持placeholder，我们可以通过CSS伪元素来模拟这个效果，具体实现如下：

先调整HTML结构，给input添加一个容器：

<div class="date-input-container">
  <input type="date" id="special-input-date" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
</div>

再添加对应的CSS样式：

.date-input-container {
  position: relative;
  display: inline-block;
}

/* 模拟占位符文本 */
.date-input-container::before {
  content: 'dd/mm/yyyy';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  pointer-events: none; /* 避免干扰input的点击事件 */
}

/* 当input有值或获得焦点时隐藏模拟占位符 */
.date-input-container input[type="date"]:valid,
.date-input-container input[type="date"]:focus {
  & ~ .placeholder-hint {
    display: none;
  }
}

2. 升级Chrome移动端版本 #

较新的Chrome移动端版本对原生控件的兼容性和显示逻辑做了优化，虽然还是不会支持placeholder属性，但整体用户体验会更稳定，也能避免老版本的一些奇怪兼容问题。

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