Angular 14.2.7中time类型输入框文本上移问题求助

你不需要调整所有普通输入框的高度，只需要针对time类型输入框的浏览器内置样式做针对性覆盖，就能解决文本偏高的问题。之前的尝试没生效，是因为浏览器对time输入框的默认样式不仅包含日历选择器图标，还自带了内部布局的padding、对齐规则，仅操作图标无法完全修正。

推荐使用以下CSS规则：

/* 统一time输入框与普通输入框的内边距、对齐方式 */
input[type="time"] {
  vertical-align: middle;
  padding: 0.5rem; /* 替换成你普通输入框的padding值 */
  height: auto;
  max-height: unset;
  line-height: 1.5; /* 匹配普通输入框的行高 */
}

/* 调整时间选择器图标，避免干扰文本布局 */
input[type="time"]::-webkit-calendar-picker-indicator {
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
}

关键说明： #

• 重置vertical-align为middle，强制文本与图标、输入框边框垂直居中对齐；
• 统一padding和line-height与普通输入框一致，消除布局差异；
• 调整图标尺寸并让它和文本对齐，避免图标挤占文本空间导致偏移；
• 取消max-height的强制限制，让输入框高度随内容自适应，匹配普通输入框的高度逻辑。

如果你的普通输入框有自定义的高度或内边距，只需要把上述规则中的padding、line-height值替换成对应的值即可完美对齐。

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