title: Is there a way to remove border from an angular mat-form-field when its disabled?
body: <p>I am trying to remove borders from a mat-form-field when the field is disabled but I've tried all the options I could find online but nothing seems to removing the borders from the div</p>
  <p>Here is my code:</p>
  <pre><code>&lt;div *ngIf=&quot;readOnly&quot; class=&quot;medium-2 columns read-only-true&quot;&gt;
    &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;full-width&quot;&gt;
      &lt;mat-label&gt;Employee ID&lt;/mat-label&gt;
      &lt;input [disabled]=&quot;readOnly&quot; class=&quot;emp_id&quot; required [(ngModel)]=&quot;form.id&quot; matInput name=&quot;empID&quot; placeholder=&quot;EMP #&quot;&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is what I have tried so far:</p>
  <p><strong>First approach:</strong></p>
  <pre><code>.read-only-true .mat-form-field-outline-start {
    border-color: white;
  }
  
  .read-only-true .mat-form-field-outline-gap {
    border-color: white;
  }
  
  .read-only-true .mat-form-field-outline-end {
    border-color: white;
  }
  </code></pre>
  <p><strong>Second Approach:</strong></p>
  <pre><code>.read-only-true .mat-form-field-outline .mat-form-field-outline-start {
    border: white !important;
  }
  
  .read-only-true .mat-form-field-outline .mat-form-field-outline-end {
    border: white !important;
  }
  </code></pre>
  <p><strong>Third approach:</strong></p>
  <pre><code>::ng-deep .read-only-true .mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-start {
    border: 1px solid white !important;
  }
  
  ::ng-deep .read-only-true .mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-end {
    border: 1px solid white; !important
  }
  
  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: white;
  }
  </code></pre>
  <p>I would really appreciate some help with this and please let me know if you want me post any other information.</p>