如何修改<input type='time'/>点击触发区域从时钟图标改为显示的时间

方案1：纯CSS实现（无JS依赖，优先推荐） #

核心原理是不隐藏时钟选择器的触发锚点，而是将其拉伸覆盖整个输入框区域，同时设置为全透明，既看不到默认时钟图标，又能实现点击输入框任意位置唤起时间选择器的效果。
适配webkit内核浏览器（Chrome、Edge、Safari）代码：

input[type="time"] {
  position: relative;
  /* 可根据业务需求自定义输入框尺寸、内边距 */
  width: 120px;
  height: 32px;
  padding: 0 8px;
  box-sizing: border-box;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  /* 等同于 top:0;right:0;bottom:0;left:0; */
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

额外补充火狐浏览器适配代码：

input[type="time"]::-moz-time-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

方案2：JS辅助实现（兼容性更强） #

如果需要兼容更多旧版本浏览器，可以配合JS主动触发时间选择器，CSS可直接保留你原本的图标隐藏逻辑。
代码示例：

<!-- HTML部分 -->
<input type="time" id="customTimeInput">

/* CSS部分，直接隐藏图标即可 */
input[type='time']::-webkit-calendar-picker-indicator {    
  background: none;
  display: none;
}

// JS部分，点击输入框主动唤起选择器
const timeInput = document.getElementById('customTimeInput');
timeInput.addEventListener('click', () => {
  try {
    // HTML标准API，唤起输入框对应的选择器
    timeInput.showPicker();
  } catch (err) {
    // 针对不支持showPicker的极旧浏览器，可自行补充降级逻辑
  }
});

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