Ionic 4：样式输入占位符

Question

我正在尝试为Ionic 4应用程序的占位符设置样式.HTML如下所示：

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

如果尝试了Ionic 2.x解决方案，它仍然无法解决。

我发现，如果您在ion-item中设置颜色，则会为输入字段的整个文本设置样式

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

在离子输入上使用伪类：placeholder-shown或伪元素:: placeholder时，尽管样式没有效果。

我究竟做错了什么？在Ionic 4中甚至可以设置输入占位符的样式吗？

编辑：

Stackblitz与Ionic 4和Angular 6分叉

Answer 1

使用以下样式代码：

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

参见此处：https : //stackblitz.com/edit/angular6-with-ionic4-list-refresh-test-yq3ntj?file=src%2Fapp%2Fapp.component.html