为何iOS端Safari中input type="time"显示为单选按钮？

问题描述 #

在React应用中使用原生时间输入控件，代码如下：

<div style={{ marginTop: '30px' }}>
  <input
    aria-label="Time"
    type="time" 
    onChange={handleTimeChange}
    style={{ padding: '8px', fontSize: '16px', width: 'auto' }}
  />
</div>

该控件在桌面端Safari中正常显示为标准时间输入框，但在iOS端Safari中却呈现为单选按钮样式。

原因解析 #

1. iOS Safari原生控件渲染差异：移动端Safari对HTML5 type="time"控件的实现逻辑和桌面端不同，部分iOS版本下会采用单选式的简化控件样式来替代标准时间选择器，这是Safari移动端的特有渲染行为。
2. 缺少初始value值：如果input未设置符合ISO时间格式（HH:mm）的value属性，iOS Safari可能无法正确识别控件类型，从而回退到兼容样式。
3. viewport配置错误：页面未正确设置viewport元标签时，移动端Safari会以桌面模式渲染页面，可能导致控件样式异常。

解决方案 #

• 添加初始value属性：给input指定符合格式的初始时间值，示例：

const [currentTime, setCurrentTime] = useState("09:00");

<input
  aria-label="Time"
  type="time" 
  onChange={(e) => setCurrentTime(e.target.value)}
  value={currentTime}
  style={{ padding: '8px', fontSize: '16px', width: 'auto' }}
/>

• 修正viewport配置：确保HTML头部的viewport元标签配置正确：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 替换为第三方组件：如果需要跨端样式统一，可使用react-datepicker、Ant Design TimePicker等第三方时间选择组件，替代原生input控件。

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