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

Answer 2

Please try this general styling to see if it has any effect:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}

Answer 3

Some components, like datetime, use your own html structure. So I has apply more tags to changed all inputs.

ion-datetime {
  --placeholder-color: rgba(211, 211, 211, 0.4);
}

ion-input, ion-textarea, ion-select {
  --placeholder-color: rgba(211, 211, 211, 1);
}

I don't understand why I use different alpha values... but it worked!