更改轮廓输入字段中的背景颜色

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