更改Angular输入占位符文本大小？

Question

我有这样的输入：

<mat-form-field class="example-full-width" floatLabel="always">
    <mat-label>Código de expediente</mat-label>
    <input type="string" placeholder="Código de expediente" [formControl]="codExp" matInput>
</mat-form-field>

结果如下：

  

如何缩小占位符文本？

请注意，label始终是浮动的，我需要更改placeholder的字体大小

Answer 1

如果您想自定义Angular材质组件并为mat-input占位符提供自己的样式，我有以下建议。

1）覆盖您主要的style.css（或style.scss，无论使用哪种）上的类。如果您想知道，它是与index.html，main.ts，package.json等位于同一目录级别的目录。

.mat-form-field-label {
  font-size: 0.8em!important;
}

我已经在here上创建了一个演示。

2）使用ViewEncapsulation:None。在我看来，这不是推荐做法，因为它删除了组件上所有形式的样式封装，从而使CSS规则具有全局性。

在您的component.ts上，您需要导入ViewEncapsulation，然后在提供封装定义时选择None。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
  encapsulation: ViewEncapsulation.None
})

您可以在组件的CSS上定义CSS样式， ，但没有!important声明。

.mat-form-field-label {
  font-size: 0.8em;
}

我在here上创建了另一个演示。

3）在同一组件的CSS中使用:host ::ng-deep伪选择器。这样做将允许您禁用该特定规则的视图封装。请注意，这种用法可能会有风险，因为将来可能deprecated。

在组件的CSS上，

:host ::ng-deep .mat-form-field-label {
  font-size: 0.8em;
}

我在这里另外创建了demo。

Answer 2

您可以在输入字段上使用font-size CSS属性来定义特定大小。

input {
    font-size: 0.8em;
}

此属性将应用于占位符，但也将应用于输入中的文本。要仅应用占位符，可以使用选择器:empty

input:empty {
    font-size: 0.8em;
}

一种替代方法是使用:placeholder，但是最后一个is not compatible with IE11是您需要考虑的事情。

Answer 3

使用CSS选择器::placeholder。

input::placeholder {
  font-size: 6px;
}

<input type="text" value="" placeholder="small text">

Answer 4

用CSS尝试这个：

input::placeholder { font-size: XXem; } 

应该帮助：）