How to change font size and color of Material2 md inputholder?

Question

How to change font size and material color of material2 md input?

check image link

Answer 1

NOTE: / deep / is now DEPRECATED, use: host :: ng-deep in place. Keep in mind: ng-deep is also technically outdated and will be replaced by a combinator, but should be used now

The problem you are working with is related to ViewEncapsulation. This is an annoyance, but from what I was able to collect, it works as intended.

, , . :/deep/

, , , :

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

. , , :

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

, : :

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

Answer 3

: css:

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