自定义角度材料输入-可见自动完成时删除底部边框

Question

我正在将Material与Angular结合使用，并希望自定义输入，以便自动完成时看起来不错。自动完成结果可见时，如何删除底部的输入边框？

https://stackblitz.com/edit/angular-2eob6d

我不确定最好的方法是什么，是否应该添加CSS规则来覆盖材料的CSS？不知道该怎么办。

Answer 1

将一些类添加到表单字段中，例如

<mat-form-field class="autocomplete-container">

然后将此类与mat-focused类一起使用以隐藏底部边框 在您的style.css

中添加以下内容

 .autocomplete-container.mat-focused .mat-form-field-outline .mat-form-field-outline-start,
.autocomplete-container.mat-focused .mat-form-field-outline .mat-form-field-outline-gap,
.autocomplete-container.mat-focused .mat-form-field-outline .mat-form-field-outline-end
{
    border-bottom: none;
    border-radius: 0;
}

Stackbliz