如何将type=time输入框的时钟图标从右侧移至左侧？

要把time输入框的默认时钟图标移到左侧，基于你已经写的增大图标代码，可以通过调整元素定位和内边距来实现，具体步骤如下：

• 首先给输入框设置相对定位和内边距，给左侧图标留出空间，同时避免右侧内容被遮挡：

input[type="time"] {
  padding-left: 30px; /* 根据你图标的大小调整，确保能放下图标 */
  padding-right: 10px;
  position: relative;
}

• 接着修改时钟指示器的定位，把它固定到输入框左侧并垂直居中：

input[type="time"]::-webkit-calendar-picker-indicator {
  font-size: 20px; /* 你已有的图标尺寸设置 */
  position: absolute;
  left: 5px; /* 调整图标和输入框左侧的间距 */
  top: 50%;
  transform: translateY(-50%); /* 让图标垂直居中 */
  cursor: pointer; /* 确保图标可点击 */
}

• 可选优化：如果输入的时间文本和图标靠得太近，可以给输入框加个文本缩进：

input[type="time"] {
  text-indent: 5px;
}

注意：这个方案仅适用于Chrome、Edge、Safari这类webkit内核的浏览器，因为::-webkit-calendar-picker-indicator是webkit私有伪元素。Firefox等其他浏览器的time输入框图标自定义能力有限，若要全兼容可能需要用自定义UI组件替代。

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