如何使用较暗的背景并保持Angular Material Form Field组件具有白色背景？-Java 学习之路

我有一个页面，我想使用此Angular Form字段：

<mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
</mat-form-field>

现在，请注意 mat-form-field 中的 appearance="outline" 是新的，因为我不知道哪个版本，但它是新的 .

因此，这会创建带边框的漂亮白色表单，但我们希望在表单上使用较暗的背景，以便用户专注于白色输入（For UX） .

当我们将这些表单字段放入div时会发生什么，我们可以将div设置为 #fbfbfb 的背景，但表单字段采用相同的颜色，所以基本上它们是透明的 . 我们试图找到一个特定的类或元素，我们可以将背景颜色或颜色设置为白色，但没有运气 .

如何在稍暗的背景上实现白色输入？

1 回答

0
您需要添加背景颜色的类名为 mat-form-field-outline . 您还需要添加5px边框半径，使其与场轮廓匹配 . 就像是：
```
<mat-form-field class="opaque-form-field">...

.opaque-form-field {
  /deep/ .mat-form-field-outline {
    background-color: #fff;
    border-radius: 5px;
  }
}
```
回复于 2024-04-27T09:24:45+08:00

如何使用较暗的背景并保持Angular Material Form Field组件具有白色背景？

1 回答

相关问题