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
Use this style code:
ion-input{
--placeholder-color: red;
--placeholder-opacity: 1;
}