How to change the material2 md input placeholder font size and colour?

Question

How to change the material2 md input placeholder font size and colour?

check this image link

Solution 1

NOTE: /deep/ is now DEPRECATED, use :host ::ng-deep in place. Bear in mind ::ng-deep is technically also be deprecated and will be replaced by a combinator, but should be used for the time being

The issue you are running into is with ViewEncapsulation. It's an annoyance, but from what I've been able to gather it is working as intended.

You do have the ability though with a few extra characters to change the style to your liking. You have to use the special selector: /deep/

For instance if you wanted to change the colour of the placeholder text as described in your question you would create a style like this:

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

This however won't change the underline style. If you wanted to change that you would just add another style like:

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

If you still want to style the material component within a specific component you can use the :host selector:

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

Solution 2

Following works for me

In .CSS file

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

Solution 3

you can write your own style in your styling css/scss for example:

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