如何在无效日期更改 ion-datetime 中下划线的颜色？答案

【问题标题】：How to change the color of the underline in ion-datetime on invalid date?如何在无效日期更改 ion-datetime 中下划线的颜色？
【发布时间】：2019-11-16 02:21:50
【问题描述】：

我想将无效日期下划线的颜色更改为红色。我还没有尝试过，因为互联网上没有类似的问题。

以下是日期和时间的代码：

<ng-container *ngSwitchCase="'picker'">
    <ion-item no-padding class="item-icons">
        <ion-label [attr.missing-detail]="missingDetail(field.formControlName) ? '' : null"
            class="form-label"
            stacked>
            {{ (field.label | translate) + ': ' + isFieldRequired(field.validators.required)}}
        </ion-label>
        <ion-datetime 
            [max]="field.validators?.max ? field.validators?.max : null"
            [required]="field.validators?.required"                            
            (ionChange)="refreshDateTimePicker(field.formControlName)"
            [formControlName]="field.formControlName"
            [cancelText]="'COMMON.CANCEL' | translate" [doneText]="'COMMON.DONE' | translate"
            [displayFormat]="field.others.displayFormat" [pickerFormat]="field.others.pickerFormat">
        </ion-datetime>
        <mat-icon item-right [svgIcon]="field.others.icon"></mat-icon>
    </ion-item>
</ng-container>

【问题讨论】：

这能回答你的问题吗？ Change ion-input underline color in Ionic 4

标签： css angular ionic-framework

【解决方案1】：

您可以使用CSS Custom Properties。将其添加到组件的 scss 文件中。

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

致谢：Milan Chandro 对Change ion-input underline color in Ionic 4 的回答

【讨论】：