Ionic 4：样式输入占位符

Question

我正在尝试设置 Ionic 4 占位符的样式 application.The 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>

如果尝试了但没有成功。

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

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

当使用伪 class :placeholder-shown 或伪元素 ::placeholder on ion-input 尽管样式显示没有效果。

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

编辑：

Stackblitz 与 Ionic 4 和 Angular 6 分叉

Answer 1

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

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

一些组件，如日期时间，使用您自己的 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 值...但它起作用了！

Ionic 4：样式输入占位符

Ionic 4: Style input placeholder

css

sass

ionic-framework

ionic4