Question 220741 in CSS Question posted in
Some basic documentation can be found here.

Css – How to set the color of mat-form-field-appearance-outline for invalid state Angular

I have set the outline color on hover successfully. But when I try to set outline color for hover in invalid state it does not work. My code is given below:

 &.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
               //It works it set the color to blue
                color: blue;
                
                //It does not work
                &.mat-form-field-invalid.mat-form-field-invalid {
                        color: red;
                }
            }

The color for invalid state &.mat-form-field-invalid.mat-form-field-invalid is not working. Please help me. If someone knows how to solve it the please let me know. Thank you

Tags:

2

Answers


  1. 0

    To change the outline color on hover for an invalid state, you should use the border-color property instead. Here’s the corrected code:

    &.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
  /* It works, it sets the outline color to blue on hover */
  border-color: blue;
}

/* For invalid state */
&.mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
  /* It sets the outline color to red for the invalid state */
  border-color: red;
}
    Login or Signup to reply.
  2. 0

    It can be done as follow:

    &.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
   color: blue;    
}

&.error {          
   &.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
      color: red;
   }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search