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

Question

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

Answer 1

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

如有必要，请在此处查看其他自定义属性。

Answer 2

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

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

Answer 3

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

当输入值为Valid o Invalid时，您可以打开要更改离子输入边框的specific_page.scss文件

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

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

Answer 4

试试这个CSS

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