web-dev-qa-db-ja.com

Ionic 4のイオン入力下線の色を変更します

Ionic 4の1ページのみで、イオンテキストのデフォルトの下線の色を変更するにはどうすればよいですか？

ionic-frameworkionic4
6
akshay ramesh

下線は実際にはイオン項目の一部であり、イオン入力ではありません。

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

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

または、クラスを使用してカスタム.custom-item.hydrated.ion-touched.ion-dirty.ion-invalid.item-label.item-interactive.item-input.item-has-focus.item.ios.ion-focusable

0
Leonardo Pineda

このCSSをお試しください

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