logo标签列表

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

angularangular-material
27

如何在 Angular/Material 输入框中更改占位符的颜色？

<mat-form-field>
    <input matInput placeholder="Name">
  </mat-form-field>
占位符的颜色是指文本的颜色吗？ - mohit uprim
参见此处并使用以下方法：https://dev59.com/pKXja4cB1Zd3GeqPPE5z#46315394 - FAISAL
所有在评论中给出的链接都适用于旧版本。 - mohit uprim
如果您愿意，我已经在这篇文章中回答了 :) https://dev59.com/I1gR5IYBdhLWcg3wjNtN#49169033 - Wenakari
9个回答
29
在最新版本的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;
}
6
这应该是 Angular Material 6 及以上版本的真正 MVP。我尝试了已选择的答案，但没有效果，而且 ::placeholder 和所有旧的方法都不行。我正在使用 Angular7.0.0 和 Material 6.4.7，这个方法立即生效。谢谢！ - djangojazz
3
注意：如果您正在尝试在同一表单字段中显示“mat-label”和“mat-placeholder”，则此解决方案在最新版本的Angular Material（v9.2.3）中无效。 - Brian A Bird
非常沮丧，因为这个优雅的解决方案在 Angular Material 9.2.4 上不再起作用了，难以相信他们没有将提示信息仅限于输入框的颜色。 - Yassir Khaldi
@Yassir 是的，我的帖子现在有点旧了，以前它运行得很好，但显然现在不行了。 我觉得这很遗憾... - Wenakari
25

我正在使用 Angular Material 8.2.3，但以上解决方案都不适用于我。在我的主题文件 theme.scss 中加入以下内容后问题得到解决：

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

相反地，通过穿透以下内容应该可以在组件样式中工作。

::ng-deep .mat-input-element::placeholder{
    color: red;
}
谢谢！这对我有用！虽然出于某些原因，我不得不添加!important，但我会进行更多的调查。 - Charis Moutafidis
如果选择这个路线，不要忘记添加：，.mat-select-placeholder 因为 selects 没有 mat-input-element 但使用它代替。 - Robin
非常完美，即使在 Angular 12 中也是如此。非常感谢！ - Torben
运行正常 :-) - Saad Abbasi
23

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

```css .mat-form-field-placeholder { color: red; } ```
::ng-deep .mat-form-field-placeholder{

  color:red;
}

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

  color:red;
}

改变下划线的颜色：

::ng-deep .mat-form-field-underline .mat-form-field-ripple{

  background-color:red;
}

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

  background-color:red;
}

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

为什么有人给这个点了踩？这个代码完美运行。如果您有任何疑虑，请告诉我。 - mohit uprim
@FirmCitiInc，您能否给这个点赞？有人踩了它，不然大家就不会看到了。谢谢。 - mohit uprim
我尝试了，但是我的声望不够，很抱歉没有帮到你。 - FirmCiti Inc
5
Mat 6 的语法是什么？ - Ka Mok
20

以上的答案都不适用于我所使用的最新版本。

这里是可行的解决方案

::ng-deep .mat-form-field-label{
    color:#000 !important;
}
1
谢谢！这个在 Angular 8.2.14 和 Material 8.2.3 上对我起作用了。我还添加了 ::ng-deep .mat-form-field-underline{ background-color: seashell !important; } 和 ::ng-deep.mat-form-field-ripple { background-color: seashell !important;; } 以改变下划线的颜色。 - dpberry178
谢谢！这个在 Angular 13 上也对我有用。 - Sasan R.Nami
这是唯一对我有效的解决方案，谢谢！ - Pavilion Sahota
3
对于 Angular Material 5.x.x 或更高版本，您可以使用 mat-placeholder 元素。您无需覆盖 Material 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标签中使用input标签的placeholder属性和mat-placeholder元素。
更多信息请参见： https://material.angular.io/components/input/overview#floating-placeholder
2
1

材料2本身提供的一个解决方案可以在示例代码中找到。我在这里做了一个样例：

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

Plunker

如此简单，它就能工作！它适用于Angular 13，而其他解决方案则不行。 - steel00
0

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

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

或者

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

虽然目前在Angular文档中仍然指定了这种方法，但他们已经提到这种方法将很快被弃用。 阅读更多：https://angular.io/guide/component-styles#!#-deep-

根据Angular.io文档，正确的做法是将视图封装设置为none，然后在与该组件对应的css文件中编写自定义样式。请注意，这样做意味着您正在远离影子DOM和仿真技术（在Angular项目中默认），这意味着您在此组件中指定的样式可能会传播到父/子组件，并可能破坏那里的样式。

-3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接