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

【问题标题】：Change Angular input placeholder text size?更改 Angular 输入占位符文本大小？
【发布时间】：2020-02-23 17:45:21
【问题描述】：

我有这样的输入：

<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的字体大小

【问题讨论】：

标签： css angular typescript angular-material

【解决方案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。

【讨论】：

【解决方案2】：

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

input {
    font-size: 0.8em;
}

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

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

另一种方法是使用:placeholder，但这是最后一个is not compatible with IE11，因此您需要考虑这一点。

【讨论】：

【解决方案3】：

用 css 试试这个：

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

应该有帮助:)

【讨论】：

:palceholder 很棒?，但不兼容 IE11，所以我想值得一提。 caniuse.com/#feat=css-placeholder

【解决方案4】：

使用 CSS 选择器 ::placeholder。

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

&lt;input type="text" value="" placeholder="small text"&gt;

【讨论】：