iOS16 Safari中input time/datetime显示异常修复方案咨询

针对iOS 16 Safari里<input type="time">和<input type="datetime-local">控件显示异常、-webkit-appearance: none无效的问题，可尝试以下几种解决方案：

方案1：完全自定义控件替代原生组件 #

原生控件在iOS 16的渲染逻辑有变动，直接自定义UI是最稳妥的方式——通过隐藏原生控件，用自定义容器模拟交互，既保留系统原生时间选择器的易用性，又能完全控制显示样式：

<!-- 自定义显示区域 -->
<div class="custom-time-picker" onclick="document.getElementById('native-time').showPicker()">
  <span id="time-text">点击选择时间</span>
</div>
<!-- 隐藏的原生time控件 -->
<input type="time" id="native-time" style="display: none;" onchange="document.getElementById('time-text').textContent = this.value">

<style>
.custom-time-picker {
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  width: fit-content;
  font-size: 14px;
  color: #333;
}
.custom-time-picker:hover {
  border-color: #999;
}
</style>

方案2：重置更多WebKit私有样式 #

如果想保留原生控件，可尝试覆盖更多iOS Safari的默认私有样式，强制统一渲染规则：

input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  /* 重置内边距、边框和背景 */
  padding: 0.6em 0.8em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #ffffff;
  /* 强制指定高度，避免控件高度异常 */
  height: 2.8em;
  /* 修复文字偏移问题 */
  text-align: center;
  /* 移除默认的内阴影 */
  -webkit-box-shadow: none;
  box-shadow: none;
}

方案3：排查父元素样式冲突 #

部分场景下，父元素的transform、overflow、position: fixed等属性会干扰iOS原生控件的渲染，可临时移除父元素的这类样式测试，确认是否是样式冲突导致的显示异常。

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