在轮廓输入栏中更改背景颜色

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