Angular中Mat-Form-Field输入框聚焦时的搜索栏高亮问题

我希望为以下代码实现的搜索框添加聚焦时的蓝色高亮效果，目前使用自定义CSS后，原本普通输入框自带的蓝色高亮在转为Mat-Form-Field后消失了。同时我也接受将Angular Material表单字段转为普通文本框的解决方案。

当前HTML代码：

<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;
}

解决方案1：修改Mat-Form-Field CSS恢复聚焦高亮 #

问题出在当前CSS强制将聚焦状态下的mat-form-field-outline-thick颜色设为#ced4da且边框宽度为0，覆盖了默认蓝色高亮。修改这部分代码即可恢复：

/* 保留非聚焦状态样式 */
.custom-form-field .mat-form-field-outline-thick {
    border-color: #ced4da !important;
    border-width: 0px !important;
    color: #ced4da !important;
    opacity: 1 !important;
}
/* 聚焦时设置蓝色高亮 */
.custom-form-field.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    border-color: #1976d2 !important; /* Angular Material默认蓝色，可自定义 */
    border-width: 2px !important;
    color: #1976d2 !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;
}

修改后，搜索框聚焦时会显示蓝色高亮边框，非聚焦状态保持原有样式。

解决方案2：转为普通文本框实现 #

如果不想依赖Mat-Form-Field，可直接用原生input结合mat-icon实现相同布局，自带浏览器默认聚焦高亮：

<div class="custom-search-box">
    <mat-icon class="search-icon">search</mat-icon>
    <input type="text" id="onSearch" (keyup)="keyUp($event)" placeholder="搜索">
</div>

对应的CSS：

.custom-search-box {
    position: relative;
    padding-top: 5px;
    padding-bottom: 0px;
    line-height: 0;
}
.custom-search-box .search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #575e64;
}
.custom-search-box input {
    padding: 0.9em 0 0.6em 2.5em; /* 给图标留出空间 */
    border: 1px solid #ced4da;
    border-radius: 4px;
    outline: none;
    color: #575e64;
    caret-color: #ced4da;
}
/* 聚焦时的蓝色高亮，可自定义颜色 */
.custom-search-box input:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

该方案无需依赖Mat-Form-Field，布局与原有样式一致，聚焦时会显示标准蓝色高亮。

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