Изменение цвета фона в поле ввода контура

Question

Эй, ребята, я хочу изменить цвет фона моей панели поиска. У него appearance="outline", и мне нравится дизайн, но, как вы видите, если я установил новый цвет, он выходит за границы и выглядит ужасно. Что я могу сделать здесь?

Мой css:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 5%;
}

::ng-deep .mat-form-field-infix {
  top: -3px;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: white;
}

Мой HTML:

<mat-form-field style="width:110%;" appearance="outline" >
    <mat-icon matPrefix>search</mat-icon>
    <input type="search" name="test" [(ngModel)]="searchText"
    placeholder="Search" aria-label="Search" matInput>
</mat-form-field>

Answer 1

Вы можете добавить border-radius в div, где вы меняете фон.

Я проверил border-radius: 5px, и это выглядит хорошо.

Код для вас

Я предполагаю, что этот справочный css работает для вас. Я только что попробовал это с твоим селектором.

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: white;
  border-radius: 5px;
}

Снимок экрана: http://prntscr.com/nanu75

Answer 2

Просто измените background-color на color и !important для переопределения Материал css.Попробуйте это, я надеюсь, это поможет вам.Спасибо

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  color: white !important; 
}