如何移除桌面端Safari中time类型输入框默认的12:30 PM值

针对桌面端Safari <input type="time"> 空值默认显示12:30 PM的解决方法 #

桌面端Safari的WebKit内核对未赋值的type="time"输入框存在特有渲染逻辑，会硬编码显示默认时间，不属于标准规范行为，可通过以下两种方案解决：

方案1：纯CSS实现（推荐，无侵入性）

通过WebKit特有伪元素+状态伪类直接定位空输入状态，隐藏默认文本：

/* 匹配未赋值的time输入框，隐藏默认显示文本 */
input[type="time"]:not(:valid)::-webkit-datetime-edit,
input[type="time"]:placeholder-shown::-webkit-datetime-edit {
    color: transparent;
}
/* 聚焦输入或存在有效值时恢复正常文本颜色 */
input[type="time"]:focus::-webkit-datetime-edit,
input[type="time"]:valid::-webkit-datetime-edit {
    color: #000; /* 可替换为你项目的输入框文本色 */
}

如果需要连时间分隔符、AM/PM标识也完全隐藏，可追加以下样式：

input[type="time"]:not(:valid)::-webkit-datetime-edit-fields-wrapper,
input[type="time"]:placeholder-shown::-webkit-datetime-edit-fields-wrapper {
    opacity: 0;
}
input[type="time"]:focus::-webkit-datetime-edit-fields-wrapper,
input[type="time"]:valid::-webkit-datetime-edit-fields-wrapper {
    opacity: 1;
}

注：如果你的输入框设置了required属性，可将伪类选择器替换为input[type="time"]:not([value]):not(:focus)避免和表单校验逻辑冲突。

方案2：JS+CSS兜底方案（兼容旧版Safari）

如果需要兼容Safari 15以下的旧版本，可通过JS监听输入状态，添加自定义类名控制样式：

// 初始化&监听所有time输入框的状态
document.querySelectorAll('input[type="time"]').forEach(timeInput => {
    // 初始状态标记
    timeInput.classList.toggle('time-input-empty', !timeInput.value)
    // 输入变化时更新状态
    timeInput.addEventListener('change', () => {
        timeInput.classList.toggle('time-input-empty', !timeInput.value)
    })
})

配套CSS：

.time-input-empty::-webkit-datetime-edit {
    color: transparent;
}

两种方案都可以实现未输入时输入框完全空白的效果，和其他浏览器的默认表现对齐，清晰区分已填/未填状态。

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