Ionic framework 更改离子4中的离子输入下划线颜色

如何在Ionic 4中仅在一个页面中更改离子文本的默认下划线颜色

下划线实际上是离子项的一部分，而不是离子输入

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

---

对于Ionic V4.X来说有点不同

当输入值有效时，您可以打开特定的_page.scss文件，在该文件中更改离子输入边框

更改以下类的颜色，如下所示：

:host {
   .item-interactive.ion-invalid{
    --highlight-background: yellow !important;
  }
  .item-interactive.ion-valid{
    --highlight-background: black !important;
  }
}

---

在app.scss文件中聚合

.ios {
    .item-has-focus.ion-invalid {
      --border-color: var(--ion-color-danger, #f1453d);
    }

   .ion-valid {
      --border-color: var(
        --ion-item-border-color,
        var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
      );
   }

   .custom-item {
      --background: transparent;
      color: #fff !important;
      --background-focused: transparent;
   }
}

.md.custom-item {
    --background: transparent;
    color: #fff !important;
    --background-focused: transparent;
    --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
    );
}

---

或者使用类来自定义

。自定义项目。水合。离子接触。离子脏。离子无效。项目标签。项目交互。项目输入。项目具有焦点。项目。ios。离子可聚焦

离子4.x在大多数时间使用CSS自定义属性

src/app/pages/test/test.page.scss

:host {
    ion-item {
        --border-color: white; // default underline color
        --highlight-color-invalid: red; // invalid underline color
        --highlight-color-valid: green; // valid underline color
    }
}

如有必要，请检查其他自定义属性。

尝试此css

.item-has-focus{
   --highlight-background: #e2e2e2;
}

---

你不能在css中更改它吗？我尝试了边框颜色，但它不起作用。你输入了

！重要信息

在你的css上？是的，我做了，仍然没有任何区别我有相同的问题，但没有解决yetWow！你救了我一天。像charm一样工作。我使用的是Ionic 5。如果将它放在global.scs和Ionic 4/5中，效果会很好。对于未来的观众，这段代码仍然可以很好地设置默认下划线。要更改无效/触摸的下划线颜色：

ion-item.ion-invalid.ion-toucted{--边框颜色：var（--ion-color danger）；}

-Ionic V5.2有效。我花了很长时间才找到这个。谢谢如果将其放入global.scs中，则不需要：主机