title: How to change mat-form-field border color in Angular Material
body: <p>I am trying to change the border color for my text box in Angular Material. Right now there are three different colors (for <em>hover</em>, <em>focus</em>, and <em>idle</em>). How can I change these colors?</p>
  
  <p>I want them different than my theme.</p>
  
  <pre><code>&lt;mat-form-field id="test" appearance="outline"&gt;
    &lt;mat-label class="test2"&gt;Outline form field&lt;/mat-label&gt;
    &lt;input matInput placeholder="name"&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>There are options to change the font size, but I can't seem to figure out the color:</p>
  
  <pre><code>mat-form-field.mat-form-field {
      font-size: 16px;
      color: red;
  }
  </code></pre>
  
  <p>The color attribute here changes nothing.</p>