CODEWITHSUNDEEP
htmlcssangularangular-material
MrSrv7
MrSrv7

Reputation: 771

How to change the color of a placeholder in Angular Material?

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.

Upvotes: 4

Views: 12556

Answers (6)

StackOverflowUser
StackOverflowUser

Reputation: 1133

.mdc-text-field ::placeholder {
    color: red;
}

Upvotes: 0

Himanshu Jain
Himanshu Jain

Reputation: 21

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.

Upvotes: 2

Anirudh Reddy Kontham
Anirudh Reddy Kontham

Reputation: 186

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>

Upvotes: 3

Kirubel
Kirubel

Reputation: 1627

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

Upvotes: 1

Muhammad Mustafa
Muhammad Mustafa

Reputation: 53

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"/>

Upvotes: 0

A. Kriel
A. Kriel

Reputation: 260

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
}

Upvotes: 0

Related Questions