Question

我是Angular和Angular Material（AM）的新手。默认情况下，AM Input Component会显示调色板的primary颜色，直到您点击表单，然后它会将placeholder值和标记线更改为accent颜色。有没有办法操纵表格，以便始终显示强调色？换句话说，表单将始终突出显示。问题是我的主要颜色是黑色，我的网页背景也很暗，因此除非用户点击表单，否则placeholder和标记线几乎不可见。这也是我网站页面的一个很好的颜色。

以下是AM docs所需的html示例：

<md-input-container>
  <input mdInput placeholder="Favorite food" value="Sushi">
</md-input-container>

您可以将color="accent"添加到input line，但同样，只有在用户点击表单时才会显示颜色。

提前谢谢。

Answer 1

您可以在组件的css文件中添加以下内容：

/deep/ .mat-input-underline {
    background-color: #FF0000;    /* replace this color with your accent color hex code */
}

demo

Answer 2

您可以使用下面使用的css选择器：

/deep/ .mat-input-underline {
   background-color: white;
}

/ deep /组合器计划在Angular中弃用，因此最好不要使用它。不幸的是，来自Angular Material的.mat-input-underline被高度指定，这使得在不使用/ deep /

的情况下很难覆盖它。

我发现最好的方法是使用ID，与默认的Angular Material样式相比，它可以为您提供更高的特异性。

<form id="food-form" [formGroup]="form" (ngSubmit)="submit()">
  <mat-input-container>
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-input-container>

然后，您的“食物形式” ID可用于在global.scss文件中定位此形式。在不破坏视图封装的情况下，不能从component.scss定位它。如果您不使用/ deep /，则必须在全局级别更改.mat-form-field-underline。波纹是选择输入时使用的颜色。

#food-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
}

我希望Angular Material团队在将来撤回其特殊性，因为目前尚无简便方法可以覆盖其默认值。

Answer 3

我有一个类似的问题，调整我的表单字段的宽度。调查时发现引用Nehal答案的答案是正确的，但在最新版本5.0.0-rcX https://angular.io/guide/component-styles中也弃用了。我继续仔细检查我的CSS选择器，但发现我需要更改ViewEncapsulation。

对我有用的是在我的css / scss文件中（当然根据需要使用您自己的选择器进行修改）：

mat-input-container {
    // Your CSS here
}

在我的组件ts文件中：

@Component({
    selector: 'my-component-selector',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    encapsulation: ViewEncapsulation.None
})

在不更改封装的情况下，CSS选择器将不会被应用。

祝你好运！

Answer 4

从 Angular Material组件生成的每个 HTML元素都会获得分配给它的类mat- css类。它们可以用于造型。

您正在谈论的输入组件有一些嵌套元素，因此您必须决定要应用样式的位置。

要将样式设置为整个输入包装器，请使用：

.mat-input-wrapper {
    background: gray;
}

检查生成的html以查看更多嵌套元素的类 - 例如mat-input-element

Answer 5

以上解决方案对我不起作用......我理解角质材料经常会改变它们的类名和样式。我必须在我的全局style.css

中这样做

.mat-form-field-underline {
  background-color: rgb(177, 140, 81) !important;
}

.mat-form-field-underline.mat-disabled {
  background-color: transparent !important;
}

Answer 6

CSS

input[class~="bg-transparente"] {
  background-color: transparent;
}

在您的输入中，执行此操作

HTML

 <input matInput class="bg-transparente">

操纵角度材料输入表格样式

6 个答案: