1

I am using Angular 9 and Angular Material 10.2.0.

My code is:

<mat-form-field> 
 <input matInput type="text" name="" placeholder="title" id="title" [(ngModel)]="titleValue" >
</mat-form-field>

I followed how to change text box placeholder color and how-do-i-change-md-input-container-placeholder-color-using-css-in-angular, but I still couldn't change the color and the default is still there.

Tom
  • 16,842
  • 17
  • 45
  • 54
MrSrv7
  • 585
  • 8
  • 22

6 Answers6

2

I was able to achieve using something like this

Use a variable for the property in your css/scss file. And make use of ElementRef to set property declared in the css/scss file during runtime.

input {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #333333;
    --placeHolder-color: #959595;
  }

  input::placeholder {
    color: var(--placeHolder-color);
  }

  input::-webkit-input-placeholder { /* Edge */
    color: var(--placeHolder-color);
  }

  input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--placeHolder-color);
  }

  input:-moz-placeholder {
    color: var(--placeHolder-color);
  }

  input::-moz-placeholder {
    color: var(--placeHolder-color);
  }

import { Directive, ElementRef, Host, Renderer2 } from '@angular/core';
import { CardNumberComponent } from 'src/app/themes/card-number/card-number.component';

@Directive({
  selector: '[appInputStyle]'
})
export class InputStyleDirective {

  private input: HTMLInputElement;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.input = this.el.nativeElement;
  }

  ngOnInit() {
    this.input.style.setProperty('--placeHolder-color', 'tomato');
  }
}

<input type="text" appInputStyle>
Anirudh Reddy Kontham
  • 146
  • 1
  • 10
1

HTML File

<input [style.color]="color" type="text" class="placeholder-color" placeholder="xyz" />

CSS File

::placeholder {
    color: var(--placeholder-color);
}

Any change in color variable value will also change the place-holder color.

Josef
  • 2,869
  • 2
  • 22
  • 23
Himanshu Jain
  • 11
  • 1
0

In your global css copy and paste the following code:

input::placeholder {
   opacity: 1 !important;
   color: #FFF !important;
}

Or in your case

mat-form-field input::placeholder {
   opacity: 1 !important;
   color: #FFF !important;
}
Kirubel
  • 1,461
  • 1
  • 14
  • 33
  • you need to include this in your global css by the way. That works for me – Kirubel Sep 10 '20 at 07:52
  • this actually work for default input textbox but i am adding matInput attribute so its not allowing to change the color by this way – MrSrv7 Sep 10 '20 at 08:34
  • Try to add this in your global css file like I said earlier and don't forget to include `!important` for both the opacity and color of placeholder. This should work. If not try to inspect the input in your browser and test this if it accepts the changes. – Kirubel Sep 10 '20 at 08:36
  • I've added `mat-form-field input::placeholder` as this one also works for me – Kirubel Sep 10 '20 at 08:42
0

I'm not sure if this will work with Angular material, but you kan give it a try, in your css add:

::-webkit-input-placeholder{
    color:red
}
A. Kriel
  • 260
  • 4
  • 20
  • this actually work for default input textbox but i am adding matInput attribute so its not allowing to change the color by this way – MrSrv7 Sep 10 '20 at 11:13
0

Following is the cross browser solution for this:

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
input:-moz-placeholder { /* Firefox 18- */
  color: red;
}
<input placeholder="This is input color"/>
Muhammad Mustafa
  • 33
  • 7
  • this actually work for default input textbox but i am adding matInput attribute so its not allowing to change the color by this way – MrSrv7 Sep 10 '20 at 08:34
0
.mdc-text-field ::placeholder {
    color: red;
}
StackOverflowUser
  • 945
  • 12
  • 10