Changing border color in mat-form-field

前端 未结 8 1492
猫巷女王i
猫巷女王i 2020-12-14 22:59

I am using angular material mat-form-field. I have a dark background, and therefore am trying to change the border of the form-field to white. But I am not able

8条回答
  •  谎友^
    谎友^ (楼主)
    2020-12-14 23:18

    I think this will cover everything.

    // mat-icon-stepper selected color change 
    ::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
        background-color: red!important;
    }
    
    //input outline color
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
        color: red!important;
        // opacity: 1!important;
    }
    
    //mat-input focused color
    ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
        color: red!important;
    }
    
    // mat-input error outline color
    ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{
        color: red!important;
        opacity: 0.8!important;
    }
    
    // mat-input carent color
    ::ng-deep .mat-input-element {
        caret-color: red!important;
    }
    
    // mat-input error carent color
    ::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
        caret-color: red!important;
    }
    
    // mat-label normal state style
    ::ng-deep .mat-form-field-label {
        color: rgba(0,0,0,.6)!important;
        // color: $mainColor!important;
    }
    
    // mat-label focused style
    ::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
        color: red!important;
    }
    
    // mat-label error style
    ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
        color: red!important;
    }
    

提交回复
热议问题