Material 15 change color input element datepicker-CodePudding

I need your help to change the color in white for the input date and underline in a datepicker element

<mat-form-field  [floatLabel]="'always'">
    <mat-label >{{label}}</mat-label>
    <input matInput [matDatepicker]="picker" [min] = "minDate" [max] = "maxDate" [(ngModel)] = "date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

I tried many css tricks as

.mat-form-field-underline {
  /*change color of underline*/
  color: white !important;
}

.mat-input-element {
  color: white;
}

.mat-datepicker-content {
  color: white;
}

The only thing that works is to set style="color:white;" in input tag

CodePudding user response：

You need know what create the "line"

e.g. in material 15, appearance="fill", is related to

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
  border-bottom-color: #0000006b;
}

//and

.mdc-text-field--filled .mdc-line-ripple::after {
  border-bottom-color: var(--mdc-theme-primary, #3f51b5);
}

//the color of the input is
  @media all
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
  color: red;
}

CodePudding user response：

Thank you, this solved my issue

.mdc-line-ripple::before {
  background-color: white!important;
}