5

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

检查此图片链接

4

4 回答 4

19

注意：/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;
}
于 2017-03-08T17:02:58.120 回答
1

您可以在样式 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);
  }
}  }}
于 2017-01-25T12:29:24.210 回答
1

以下对我有用

在 .CSS 文件中

::ng-deep .mat-input-wrapper{
  font-size: 10pt;
}
于 2018-05-08T19:39:16.977 回答
0

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

:host input.md-input-element {
    color: red;
    font-size: 18px;
 }
于 2017-02-13T17:35:23.237 回答