title: Changing background color in outline input field
body: <p>I want to change the background color of my searchbar. It has the <code>appearance="outline"</code> and I like the design, but if I set a new color it goes over the borders and looks ugly. What can I do here?</p>
  
  <p>My CSS:</p>
  
  <pre><code>::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 5%;
  }
  
  ::ng-deep .mat-form-field-infix {
    top: -3px;
  }
  
  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    background-color: white;
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;mat-form-field style="width:110%;" appearance="outline" &gt;
      &lt;mat-icon matPrefix&gt;search&lt;/mat-icon&gt;
      &lt;input type="search" name="test" [(ngModel)]="searchText"
      placeholder="Search" aria-label="Search" matInput&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/EGCee.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EGCee.png" alt="Enter image description here"></a></p>