Question

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

Answer 1

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

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

Answer 2

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 3

对于Ionic V4.X有点不同。

您可以打开 specific_page.scss 文件，当输入值有效 o 无效时，您要在其中更改 ion-input 边框。

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

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

Answer 4

要聚合到app.scss文件中

1. Orville Wright
2. Rogelio Holloway
3. Marjorie Figueroa
4. Debra Garner
1. 21 July 1988
2. 13 September 1988
3. 9 October 1988
4. 7 February 1988

或使用类自定义.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))) ); }

Answer 5

试试这个CSS

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

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

5 个答案: