能否用input type=time指定时长？如何去除AM/PM标识或自定义显示格式？

核心问题 #

原生HTML的<input type="time">显示格式完全由浏览器和系统的区域设置决定，没有原生属性可以直接强制指定显示格式或去除AM/PM标识。不过有几个可行的折中方案：

方案1：用JS封装，保留交互+自定义显示（最可靠） #

通过隐藏原生输入框，用自定义元素展示格式化后的时长，点击自定义元素唤起原生输入框选择，选择后同步内容。这样既保留了time输入框的便捷选择体验，又能完全控制显示格式。

示例代码：

<!-- 隐藏原生time输入框 -->
<input type="time" id="durationInput" value="01:30" style="display: none;">
<!-- 自定义显示容器，模拟输入框样式 -->
<div id="durationDisplay" style="border: 1px solid #ddd; padding: 6px 8px; border-radius: 4px; cursor: pointer; width: 80px;">01:30</div>

<script>
const input = document.getElementById('durationInput');
const display = document.getElementById('durationDisplay');

// 点击显示容器唤起原生输入框
display.addEventListener('click', () => input.click());

// 输入框值变化时，同步显示HH:mm格式的内容
input.addEventListener('change', () => {
  // 原生time输入框的value始终是HH:mm格式，不受显示的AM/PM影响
  display.textContent = input.value;
});
</script>

方案2：设置lang属性强制24小时制（简单但不绝对） #

给输入框添加lang属性，指定使用24小时制的区域（比如英式英语en-GB、法语fr等），多数浏览器会遵循这个设置切换为24小时显示，但无法保证所有系统和浏览器都生效。

示例代码：

<input type="time" value="01:30" lang="en-GB">

方案3：CSS隐藏AM/PM（不推荐，兼容性差） #

针对不同浏览器的内部DOM结构，用CSS隐藏AM/PM部分，但这个是hack手段，不同浏览器的伪元素或结构差异大，后续浏览器更新可能失效，仅临时应急用。

比如针对Chrome/Edge的CSS：

input[type="time"]::-webkit-datetime-edit-ampm-field {
  display: none;
}

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