Ionic 4: Style input placeholder

Question

I'm trying to style the placeholder of my Ionic 4 application.The HTML looks as follows:

<form>
  <ion-grid>
    <ion-row class='label'>Name</ion-row>
    <ion-row>
      <ion-item>
        <ion-input type='text' [(ngModel)]='recipe.name' name='name' placeholder='Name'></ion-input>
      </ion-item>
    </ion-row>
    <ion-row class='label'>Weight</ion-row>
    <ion-row>
      <ion-item>
        <ion-input type='number' [(ngModel)]='recipe.weight' name='weight' placeholder='Weight'></ion-input>
        <ion-label>kg</ion-label>
      </ion-item>
    </ion-row>
  </ion-grid>
</form>

If tried out Ionic 2.x solutions yet it did not work out.

I've figured out that if you set a color in ion-item it styles the entire text of the input field

ion-item {
    ion-input{
        color:red;
    }
}

when using the pseudo class :placeholder-shown or the pseudo element ::placeholder on ion-input though the styling shows no effect.

What am I doing wrong? Is there even a possibility in Ionic 4 to style input placeholder ?

Edit:

Stackblitz to fork with Ionic 4 and Angular 6

Answer 1

Use this style code:

ion-input{
    --placeholder-color: red;
    --placeholder-opacity: 1;
}

See here:https://stackblitz.com/edit/angular6-with-ionic4-list-refresh-test-yq3ntj?file=src%2Fapp%2Fapp.component.html