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 solutions 但它没有成功。

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

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

当在 ion-input 上使用伪类 :placeholder-shown 或伪元素 ::placeholder 虽然样式显示没有效果.

我做错了什么？ Ionic 4 中是否有可能设置输入占位符的样式？

编辑：

Stackblitz 使用 Ionic 4 和 Angular 6 进行分叉

Answer 1

某些组件，例如日期时间，使用您自己的 html 结构。 所以我应用了更多标签来更改所有输入。

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

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

我不明白为什么我使用不同的 alpha 值...但它有效！

Answer 2

使用此样式代码：

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

Answer 3

请试试这个通用的样式，看看有没有效果：

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