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

使用此样式代码：

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

Answer 3

某些组件（例如datetime）使用您自己的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：样式输入占位符

3 个答案: