Question

如何更改角度/材质输入占位符上的占位符颜色？

<mat-form-field>
    <input matInput placeholder="Name">
  </mat-form-field>

Answer 1

要更改占位符的颜色，请覆盖.mat-form-field-placeholder的颜色属性，如：

fluidRow

更改下划线的颜色：

::ng-deep .mat-form-field-placeholder{

  color:red;
}

::ng-deep .mat-focused .mat-form-field-placeholder{

  color:red;
}

这很完美。演示：https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe?p=preview

Answer 2

在最后一个版本的angular中，您可以删除输入中的占位符，并在mat-form-field中添加mat-placeholder并使用类自定义css

html：

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

的CSS：

.mat-focused .placeholder {
    color: #00D318;
}

Answer 3

对于角度材料5.x.x或更高版本，您可以使用mat-placeholder元素。您不需要覆盖材质css类。这种方法 - 我认为 - 是最好的：

  <mat-form-field class="full-width">
            <input matInput type="text" name="name" formControlName="name" >
            <mat-placeholder style="color:brown">Enter your name here</mat-placeholder>
            <mat-icon matSuffix class="material-icons">perm_identity</mat-icon>
          </mat-form-field>

注意：您不能在同一个mat-form-field标记中的mat-placeholder元素的输入标记中同时使用占位符属性。

了解更多信息： https://material.angular.io/components/input/overview#floating-placeholder

Answer 4

正如@mohit uprim在上面的答案中所建议的那样，我们可以使用阴影穿透后代组合，即 / deep / 或 :: ng-deep 或＆gt;＆gt;＆gt; 以下是一个示例

/deep/ .mat-form-field-placeholder {
  color: #fff;   // choose the color you want
}

OR

>>> .mat-form-field-placeholder {
  color:red;
}

尽管此方法已在角度文档中指定，但他们已经提到很快就会弃用此方法。阅读更多：https://angular.io/guide/component-styles#!#-deep-

根据Angular.io文档，正确的方法是将组件上的视图封装更改为无，然后将自定义样式写入与此组件相对应的css文件中。请注意，通过这样做，您将远离 shadow dom 和模拟技术（角度项目中的默认设置），这意味着您在此组件中指定的样式可能会传播到父/子组件，也可能搞乱那里的样式

Answer 5

example code中找到的材料2本身提供的一种解决方案。我在这里做了一个示例：

 <mat-form-field>
   <mat-label>Input</mat-label>
   <input matInput >
 </mat-form-field>

Plunker

Answer 6

我们有什么选择？

select 'test'|| chr(9)||'New volume' as c1 from dual标签已过时：https://material.angular.io/components/form-field/api#MatPlaceholder
<mat-placeholder>选择器将很快被弃用。 /deep/选择器仍是实验性功能：https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

因此，我建议仅当您的客户端具有现代浏览器时才将输入占位符用作属性。

Answer 7

使用角度为6的最新角材料时，我没有发现上面的答案。

这是可行的解决方案

::ng-deep .mat-form-field-label{
    color:#000 !important;
}

Answer 8

我使用的是角形材质8.2.3，以上解决方案均不适用于我，而theme.scss（材质主题文件）中的以下内容适用于我

.mat-input-element::placeholder{
   color: red;
}

与此相反，以下内容应适用于组件样式

::ng-deep .mat-input-element::placeholder{
    color: red;
}

Answer 9

Angular材料本身并没有提供任何设置样式的指令。为此，你需要去上学。只需为您的input元素提供一个id / class，然后使用伪类（:: placeholder）。供参考：https://css-tricks.com/almanac/selectors/p/placeholder/

如何更改Angular 5 Material输入占位符？

9 个答案: