如何更改 material2 md 输入占位符字体大小和颜色？答案

【问题标题】：How to change the material2 md input placeholder font size and colour?如何更改 material2 md 输入占位符字体大小和颜色？
【发布时间】：2016-11-08 08:20:12
【问题描述】：

如何更改material2 md输入占位符的字体大小和颜色？

check this image link

【问题讨论】：

标签： angular material-design angular-material2

【解决方案1】：

注意：/deep/ 现在已弃用，请使用 :host ::ng-deep。请记住::ng-deep 在技术上也已被弃用，将被组合器取代，但暂时应该使用

您遇到的问题是 ViewEncapsulation。这很烦人，但据我所知，它正在按预期工作。

你确实有能力通过一些额外的字符来改变你喜欢的风格。你必须使用special selector: /deep/

例如，如果您想更改问题中描述的占位符文本的颜色，您可以创建如下样式：

/deep/ .mat-input-placeholder {
    color: #fff;
    font-size: 2em;
}

但这不会改变下划线样式。如果您想更改它，您只需添加另一种样式，例如：

/deep/ .mat-input-ripple.mat-focused {
    background-color: #fff;
}

如果您仍想在特定组件中设置材质组件的样式，可以使用:host selector：

:host /deep/ .mat-input-placeholder {
   font-size: 2em;
}

【讨论】：

更改color 没问题，但font-size 会破坏一切。 plnkr.co/edit/gFeD2OZdU0vYdAK6w7Pr?p=preview 。或者：您必须在多个地方应用font-size 更改
我已经使用:host 选择器和/deep/ 解决了字体大小问题。这足以指定它不会破坏整个页面。我添加了一个示例
/deep/ 自 4.1 或 4.2 起已弃用。现在使用 ::ng-deep。
谢谢，我保留了原来的答案，但留下了一个便条

【解决方案2】：

您可以在样式 css/scss 中编写自己的样式，例如：

md-input-container{  width: 100%;  .md-input-placeholder {
color: #a8a8a8;
padding: 0 12px;

&.md-float {
  &.md-focused,
  &:not(.md-empty) {
    transform: translateY(-100%) scale(0.95);
  }
}  }}

【讨论】：

【解决方案3】：

以下作品适合我

在 .CSS 文件中

::ng-deep .mat-input-wrapper{
  font-size: 10pt;
}

【讨论】：

【解决方案4】：

您需要在 css 中使用 :host 选择器：

:host input.md-input-element {
    color: red;
    font-size: 18px;
 }

【讨论】：