web-dev-qa-db-ja.com

無効状態でMAT-FORM-FIELDをカスタマイズする方法

私はangular素材のMAT-FORM-FIELをカスタマイズしようとしています。下線の境界線をカスタマイズすることができました。

_::ng-deep.mat-form-field-ripple {
  background-color: yellow;
}
_

これで、無効な状態の下線境界線を破線ではなくソリッドにするためにカスタマイズしようとしています。

私はこれを試してみましたが、それは下線のためには機能しませんでした：

_::ng-deep.mat-form-field-disabled
 {

 }
_

enter image description here

これが無効な状態で灰色の固体になることをお勧めします

_ <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>
_
angularangular-materialangular7angular-material-7
4
Ebram

あなたが試すことができます

::ng-deep .mat-form-field-disabled {
   .mat-input-element {
        color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-label {
        color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-underline {
         color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-ripple {
         color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-required-marker {
         color: rgba(0, 0, 0, 0.14);
    }
 _
0
iugs88

これはそれを修正しました：

    ::ng-deep.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0,
    rgba(0, 0, 0, 0.42) 33%,
    #c2c7cc 0
  ) !important;
  background-size: 1px 100% !important;
  background-repeat: repeat-x !important;
}
 _
0
Ebram