Angular Material中datetime-local输入框缩高后文本截断求助

我尝试通过height属性调整Angular Material中datetime-local类型日期输入框的高度，代码如下：

<mat-form-field appearance="outline">
  <input formControlName="dateInput" matInput type="datetime-local" id="date" name="date" style="padding: 0px !important; height: 19px;" />
  <mat-error>
    <app-error-message [control]="lessonDateMode ==='individual' ? lessonForm.controls['dateInput'].errors : null"></app-error-message>
  </mat-error>
</mat-form-field>

设置后输入框内文本出现截断，视觉上明明有足够空间容纳文本，我希望保留当前字号并缩小输入框高度，却仍出现截断问题。

该问题仅出现在datetime-local类型输入框，其他类型输入框调整高度无异常。

已尝试方案 #

• 设置内边距为0
• 调整行高
• 设置box-sizing为border-box

datetime-local类型输入框存在浏览器层面的默认内置样式（如自带的时间选择控件元素），直接设置height会与这些默认样式冲突，导致文本截断。以下是可行的调整方案：

1. 调整mat-form-field容器高度（推荐） #

Angular Material的mat-form-field有独立布局结构，优先通过修改容器样式来缩小整体尺寸，同时保证文本垂直对齐：

/* 自定义类，避免全局样式污染 */
.small-datetime-field {
  height: 36px; /* 按需调整容器整体高度 */
  --mat-form-field-outline-width: 1px; /* 可选：缩小边框宽度适配小尺寸 */
}

.small-datetime-field input.mat-input-element {
  padding: 0;
  height: 100%;
  line-height: normal; /* 匹配当前字号，避免行高导致的截断 */
  display: flex;
  align-items: center; /* 垂直居中文本 */
}

模板中应用该类：

<mat-form-field appearance="outline" class="small-datetime-field">
  <input formControlName="dateInput" matInput type="datetime-local" id="date" name="date" />
  <mat-error>
    <app-error-message [control]="lessonDateMode ==='individual' ? lessonForm.controls['dateInput'].errors : null"></app-error-message>
  </mat-error>
</mat-form-field>

2. 覆盖浏览器内置控件样式 #

部分浏览器会为datetime-local输入框添加伪元素（如Chrome的::-webkit-datetime-edit），需调整这些伪元素的内边距和高度：

/* 自定义input类 */
.small-datetime-input::-webkit-datetime-edit {
  padding: 0;
  height: 19px; /* 匹配目标高度 */
  display: flex;
  align-items: center;
}

/* 可选：调整日历图标的边距，避免超出输入框 */
.small-datetime-input::-webkit-calendar-picker-indicator {
  margin: 0 2px;
}

模板中应用类：

<input formControlName="dateInput" matInput type="datetime-local" id="date" name="date" class="small-datetime-input" />

3. 关键注意事项 #

• 避免使用!important强制覆盖样式，优先通过自定义类的优先级实现样式覆盖
• 确保line-height与当前字号匹配，防止行高过大或过小导致文本偏移
• 不同浏览器对datetime-local的默认样式存在差异，需在目标浏览器中测试调整

内容的提问来源于stack exchange，提问作者Scott-MEARN-Developer