更改大纲输入字段中的背景颜色

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>

原文由 CptDayDreamer 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Johar Zaman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是可怕的代码，但设置了背景颜色，使其仅在圆形部分中。而不是在轮廓之外看到背景的小角落。

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

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

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

原文由 ttugates 发布，翻译遵循 CC BY-SA 4.0 许可协议