如何自定义离子输入占位符答案

【问题标题】：How to customize Ionic Input Placehoder如何自定义离子输入占位符
【发布时间】：2019-01-23 15:22:06
【问题描述】：

我正在使用 ionic 设置登录页面。我想更改 Ion-input 中占位符的颜色。如何使用 CSS 实现这一目标

我试过了

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

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

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

但它不起作用

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

转到您的 variables.scss 并在末尾添加以下代码：

*::-webkit-input-placeholder {
    color: white;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: $roadmate-header-icon;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: white;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: white;
}

无论您应用什么类，这都会影响您应用中的所有输入。在您的代码中，您只针对应用了一个名为 text-input 的类的输入

【讨论】：

【解决方案2】：

ion-input
{
        --placeholder-color:#fff;
         --color: #fff;
}

使用上面的代码，您可以更改 Ionic 中输入字段的占位符颜色和文本颜色。更多 https://beta.ionicframework.com/docs/api/input

【讨论】：