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

Question

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

检查此图片链接

Answer 1

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

您遇到的问题是ViewEncapsulation.这是一个烦恼,但从我能够收集到的它是按预期工作.

你有能力使用一些额外的角色来改变你喜欢的风格.你必须使用特殊选择器:/ deep /

例如,如果您想按照问题中的描述更改占位符文本的颜色,则可以创建如下样式:

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

但是,这不会改变下划线样式.如果你想改变它,你只需添加另一种风格,如:

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

如果您仍想在特定组件中设置材质组件的样式,可以使用:host选择器:

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

Answer 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);
  }
}  }}