Edit border color of material form field if element is touched

Question

How to change border color of material form field if element is touched/focused/active within angular. I tried to change color by overriding material css-class and also tired to create my own css class but both ways does not effect the element.

/*my.component.html*/

 <mat-form-field class="matFormField">
    <mat-label>Name</mat-label>
    <input matInput [formControl]="name" required>
   </mat-form-field>

/*my.component.css*/    

.matFormField:focus {
  border-color: green !important;
  color: green;
}

Danilo Fagundes · Answer 1 · 2023-05-05T00:53:08.137

If I understand correctly what you want to do, you can try using focus-within. Below is an example html applying your code.

 .mat-form-field {
      border: 2px solid gray;
    }

    .mat-form-field:focus-within,
    .mat-form-field:active,
    .mat-form-field input:checked {
      border-color: green;
      color: green;
    }

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
  <form>
    <mat-form-field class="matFormField">
      <mat-label>Name</mat-label>
      <input matInput [formControl]="name" required>
    </mat-form-field>
  </form>
</body>

</html>

If I misunderstood, let me know so I can look into another approach.

Tried your solution within [angular framework](https://material.angular.io/components/form-field/overview). The `.mat-form-field` class has effect but the color definition for the on focus etc. take no effect. — Hölderlin, May 05 '23 at 03:19

Edit border color of material form field if element is touched

1 Answers1