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 进行分叉

原文由 MirJo 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 לבני מלכה 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

请尝试这种通用样式，看看它是否有任何效果：

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

原文由 Torjescu Sergiu 发布，翻译遵循 CC BY-SA 4.0 许可协议