使用 css 在离子输入上书写时更改输入文本的颜色答案

【问题标题】：Change color of input text when writing on a ion-input with css使用 css 在离子输入上书写时更改输入文本的颜色
【发布时间】：2019-08-28 15:44:10
【问题描述】：

我正在尝试设置ion-input 的样式，当没有文本时我有一个占位符，如果有文本，则文本为黑色，如果我正在输入文本，则为#9933CC。

HTML 如下所示：

<ion-item>
    <ion-input placeholder="Last Name" autocapitalize="on" [(ngModel)]="user.lastname" value="{{user.lastname}}"></ion-input>
</ion-item>

这已经有占位符并将值与模型联系起来，所以我一切都好，它按预期工作。问题是当我打字时，打字颜色总是黑色的。这是我的 .scss 文件中的一段 CSS：

input, select, textarea{
  color: #000000;
}

textarea:focus, input:focus {
  color: #9933CC !important;
}

这是我在另一个 SO question 中发现的，显然对这个人有帮助，但在我的情况下它不起作用。

有人可以帮忙吗？谢谢！

【问题讨论】：

【解决方案1】：

发现ion-input 的其中一个父项分配了一个名为item-has-focus 的类，该类在该项获得焦点时设置。我只需要在我的 scss 文件中定义以下内容即可使其工作：

.item-has-focus{
  color: #9933CC !important;
}

【讨论】：