Chrome中绑定display:none隐藏date输入框的label点击失效问题

问题原因 #

Chrome和Firefox对隐藏表单元素的交互逻辑存在差异：

• Chrome会直接屏蔽display: none状态的表单元素的关联触发逻辑，即使label通过for属性和输入框绑定，点击label也不会唤起日期选择面板
• Firefox没有这个限制，所以最初的写法可以在火狐下正常运行

之前尝试的两种隐藏方案存在的问题：

• display: none：触发Chrome的上述限制，功能失效
• 宽高设为0+overflow: hidden+清除内外边距：元素依然占据正常文档流位置，会打乱现有页面布局

可行解决方案 #

只要替换原生date输入框的隐藏样式即可，原来的日期赋值逻辑、label样式都不需要修改。

方案1：绝对定位+可见性隐藏（你当前使用的方案，可正常生效） #

#date {
  position: absolute;
  visibility: hidden;
}

这个方案下，输入框会脱离正常文档流，不会占用布局空间，同时依然保留在可交互元素树中，Chrome不会拦截label的关联触发，点击label可以正常唤起日期选择器。

方案2：裁剪式隐藏（兼容性更强的通用方案） #

如果需要覆盖更特殊的浏览器场景，可以用无障碍场景下通用的可交互元素隐藏写法，所有主流浏览器都支持：

#date {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  margin: 0;
  padding: 0;
}

这个写法会把输入框裁剪到视觉完全不可见的状态，同时不会被浏览器判定为不可交互元素，也完全不会影响现有页面布局。

原有参考代码 #

业务逻辑代码无需调整，直接替换输入框隐藏样式即可：

<input type="date" name="date" id="date">
<label class="input" for="date" style="color:var(--text);" id="datelabel">Date</label>

#datelabel {
    padding: 16px;
    border-radius: 15px;
    border: 2px solid rgba(0, 0, 0, 0.8);
    outline: none;
    font-size: 20px;
    transition: .2s;
    width: 200px;
    display: block;
}

document.querySelector("#date").onchange = (e) => {
  document.querySelector("#datelabel").innerHTML = e.target.value;
}

避坑提示：不建议用opacity: 0+层级置底的方式隐藏输入框，这种写法容易出现元素被遮挡导致触发失效，或者意外拦截下层元素点击事件的问题。

内容的提问来源于stack exchange，提问作者Paul Raguenet de Saint Albin