HTML input type=time元素am/pm字段的CSS伪元素及全局隐藏方案咨询

不同主流浏览器对input type="time"的AM/PM字段使用了不同的CSS伪元素控制，要实现全浏览器隐藏，需要针对性处理：

各浏览器对应的伪元素及解决方式 #

• Chrome、Safari、Edge（WebKit内核）：控制AM/PM显示的伪元素是::-webkit-datetime-edit-ampm-field
• Firefox：目前没有专门的AM/PM伪元素，但可以通过强制24小时制的逻辑从根源避免它出现，同时调整输入框布局消除多余空间

通用CSS代码实现 #

/* 隐藏WebKit内核浏览器的AM/PM字段 */
input[type="time"]::-webkit-datetime-edit-ampm-field {
    display: none;
}

/* Firefox下强制使用24小时制，避免AM/PM显示 */
input[type="time"] {
    appearance: none;
}

/* 调整Firefox时间输入框宽度，消除AM/PM预留的空白位置 */
input[type="time"]::-moz-time-picker {
    width: 100%;
}

额外优化建议 #

如果想彻底杜绝AM/PM相关问题，还可以在业务逻辑层确保用24小时制：比如通过JavaScript限制输入的时间范围，或者将用户输入的12小时制时间自动转换为24小时格式，从根源上规避浏览器的AM/PM显示逻辑。

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