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

Question

我们如何在 Ionic 4 的单个页面中更改 ion 文本的默认下划线颜色？

Answer 1

下划线其实是ion-item的一部分，不是ion-input。

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

Answer 2

对于 Ionic V4.X 有点不同。

您可以打开 specific_page.scss 文件，当输入值为有效 o 无效

改变以下class的颜色，像这样：

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

Answer 3

汇总到 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)))
    );
}

或者使用class自定义.custom-item.hydrated.ion-touched.ion-dirty.ion-invalid.item-label.item-interactive.item-input.item-has-focus.item.ios.ion-focusable

Answer 4

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

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

Answer 5

试试这个 css

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

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

Change ion-input underline color in Ionic 4

ionic-framework

ionic4