Css 搜索栏突出显示角形HTML中的MatFormfield输入框的焦点

我在Stackoverflow上跟踪这个问题.

Textbox Highlighting个

我希望对具有此代码的搜索框进行相同的突出显示.

<mat-form-field  class="custom-form-field" appearance="outline" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px;">
    <input style="padding-top: 0px; padding-bottom: 0px;" matInput type="text" id="onSearch" (keyup)="keyUp($event)">
    <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

它的CSS码如下所示.

.custom-form-field .mat-form-field-outline-thick,
.custom-form-field
.mat-form-field-appearance-outline.mat-focused
.mat-form-field-outline-thick {
    border-color: #ced4da !important;
    border-width: 0px !important;

    color: #ced4da !important;
    opacity: 1 !important;
}
.custom-form-field .mat-input-element {
    caret-color: #ced4da !important;
    color: #575e64;
}
.custom-form-field .mat-form-field-infix {
    border-top: 0px !important;
    padding: 0.9em 0 0.6em 0 !important;
}
.custom-form-field .mat-form-field-prefix {
    top: -1px !important;
    color: #575e64;
}
.custom-form-field .mat-form-field-outline-start,
.custom-form-field .mat-form-field-outline-end,
.custom-form-field .mat-form-field-outline-gap {
    border-width: 1px !important;
}

蓝色突出显示不会对输入文本框应用任何样式.但是，如果我将输入文本框转换为mat-form-field，突出显示将与当前代码一起消失.

至少从Angular Material表单域转换到文本框对我来说也是可以的…