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变量覆盖,我无法弄清楚如何覆盖输入字段的边框和占位符文本的继承样式.

除了影响每个输入所在的特定页面的这些更改之外,我还想避免使用'!important'(我不希望更改为'global').

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

Answer 2

只需执行::占位符选择器,即

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

Answer 3

Ionic 2提供了可用于轻松更改样式的sass变量替代。

theme / variables.scss

$text-input-placeholder-color:(#000);

Answer 4

这对我有用：D

ionic cli 4.1.1

例子.scss

ion-input {
    ::placeholder{
        color:white !important;
    }
}

示例.html

<ion-input placeholder="Username" type="text"></ion-input>