更改离子浮点输入颜色答案

【问题标题】：Changing ionic float input color更改离子浮点输入颜色
【发布时间】：2019-03-17 08:15:17
【问题描述】：

我需要更改我的离子输入和离子标签的颜色（从默认的黑色变为白色）。我正在做这样的事情：

    <ion-item style="color:#ffffff">
      <ion-label floating style="color:#ffffff">Password</ion-label>
      <ion-input [(ngModel)]="user.password" name="password" type="password" #password="ngModel" required >
      </ion-input>
    </ion-item>

标签颜色发生变化，但输入的底线不变。查看离子文档，我没有找到特定的内容。有人可以帮我吗？

【问题讨论】：

标签： css ionic-framework ionic2

【解决方案1】：

您可以尝试重写 Ionic 的样式规则，如下所示：

/* Workaround to hide android default validation colors */
ion-item.item-md.item-input.input-has-focus .item-inner,
ion-item.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner,
ion-item.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
    border-bottom-color: #ffffff;
    box-shadow: none;
}

/* Workaround to hide window phone default validation colors */
ion-item.item-wp.item-input.input-has-focus .text-input,
ion-item.item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input,
ion-item.item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
    border: 2px solid #ffffff;
}

【讨论】：

您在哪里包含这些样式规则？请验证样式是否正确加载。我已经检查过了，答案应该有效：working gif
我将这些行添加到 app.scss

【解决方案2】：

您可以使用以下方法来做到这一点。

ion-item { --border-color: var(--ion-color-danger, #f1453d);}

【讨论】：