在输入字段中向上推文本，使用 Angular V14.2.7 键入时间

Question

我面临的问题是，我们有一个输入字段类型时间，其中文本被推得比正常输入字段更高。 我知道这个问题的根本原因可能是输入字段附带的时间选择器图标，或者至少我认为这是导致这一切的原因。 我想知道是否有人想出了解决这个问题的方法？ 这是我的问题的迷你版本

我通过以下方式访问了该图标

input[type='time']::-webkit-calendar-picker-indicator selector

并尝试将其设置为

display: none 

=> 将其从 GUI 中删除，但增加的输入高度仍然存在

font-size: 0.5em

=> 我想我可以把它变小并将输入字段恢复到原来的高度。

我最接近满意的一点是通过了

input { max-height: 1.125em; padding-top: 10px; }

但是，随着输入字段现在对齐，时间类型的输入字段内的包含文本与正常对应的文本在垂直方向上不对齐：

是否有解决办法，或者我是否必须扩大所有其他输入字段以适应此异常？

Answer 1

对于其他想知道的人，我设法通过编辑垫子下划线的位置来绕过这个问题

::ng-deep .ClassOfYourInputfield .mat-form-field-underline { top: 2.775em; }

如果没有 MatFormField 的

appearance="fill"

标签，效果最好，因为输入字段的高度仍然太大。由于这只是一种解决方法，对于想要填充样式的人来说可能不可行，所以我会开放这个问题。