Ionic 2 占位符文本样式

Question

我正在使用 Ionic 2 rc0 开发一个应用程序，整个应用程序中有几个输入字段仍然需要样式。

 <ion-item class="su-p3-item">
  <ion-label floating class="su-input">Your name</ion-label>
  <ion-input type="text" class="su-input"></ion-input>
</ion-item>

离子 2 输入 api http://ionicframework.com/docs/v2/api/components/input/Input/

具体来说，我需要更改占位符文本的样式，以及活动时的底部边框。通过 API 和提供的 SASS 变量覆盖，我无法弄清楚如何覆盖输入字段的边框和占位符文本的继承样式。

除了影响每个输入所在的特定页面的这些更改之外，我想避免使用“！重要”（我不希望更改是“全局”）。

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

Answer 1

使用 Ionic2 RC4，您必须在 app.scss 文件中添加以下行：

 .text-input::-moz-placeholder {
  color: white;
}

.text-input:-ms-input-placeholder {
  color: white;
}

.text-input::-webkit-input-placeholder {
  text-indent: 0;
  color: white;
}

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

Answer 2

只需执行 ::placeholder 选择器，即

<ion-input placeholder="enter placeholder here..." class="custom-input" type="text"></ion-input>

在CSS中就像这样称呼它

ion-input {
  &.custom-input {
    font-size: 20px; //sets text font size
    ::placeholder {
      font-size: 12px; //sets placeholder font size
    }
  }
}

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