如何在Firefox与Chrome中统一Angular Material时间输入样式（仿Firefox）

原生type="time"输入框在Chrome和Firefox中样式差异明显，要让Angular Material的时间输入框统一为Firefox的简洁风格，需通过自定义CSS覆盖Chrome的默认控件样式，具体实现如下：

步骤1：保留原有HTML结构 #

现有代码无需修改，继续使用带matInput的时间输入框：

<mat-form-field appearance="outline">
     <mat-label>Hora hasta</mat-label>
     <input matInput type="time" name="d4" [(ngModel)]="updateModel.horaHasta[0]" [min]="minHour" max="23:59">
</mat-form-field>

步骤2：添加自定义CSS样式 #

在组件样式文件（如.component.scss）中添加以下样式（若组件启用视图封装，需用::ng-deep穿透；也可直接写入全局样式文件styles.scss）：

/* 隐藏Chrome专属的时间输入控件按钮 */
::ng-deep input[type="time"]::-webkit-inner-spin-button,
::ng-deep input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* 调整输入框内边距，匹配Firefox视觉效果 */
::ng-deep mat-form-field.mat-form-field-appearance-outline input.mat-input-element {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}

/* 确保输入框文本对齐一致 */
::ng-deep input[type="time"] {
    text-align: left;
    font-family: inherit;
}

关键说明： #

• ::-webkit-inner-spin-button和::-webkit-calendar-picker-indicator是Chrome特有的伪元素，对应上下箭头和右侧时间选择器按钮，隐藏后即可消除Chrome的额外控件。
• 内边距数值可根据mat-form-field的实际外观微调，保证文本位置与Firefox对齐。
• 若使用全局样式文件，无需添加::ng-deep，直接写选择器即可。

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