title: How to change the colour of placeholder and input field of matInput field using of Angular material
body: <p>In my code (see below) I want to set the colour of placeholder i.e Username and Password and a margin below it to <em>white</em>.</p>
  
  <p>Means the Username and password text should be of white colour and border below it should also be of white colour as i am using a dark back-ground colour.</p>
  
  <p>How can I achieve that?</p>
  
  <p>Html</p>
  
  <pre><code>&lt;mat-card class="login"&gt;
  &lt;form &gt;
      &lt;mat-form-field color="accent" autocomplete="off" class="form"&gt;
              &lt;input class="inputField" maxlength="10" matInput [placeholder][1]="Enter Username" [formControl]=""&gt;
      &lt;/mat-form-field&gt;
      &lt;br&gt;
      &lt;mat-form-field color="accent" autocomplete="off" class="form"&gt;
                  &lt;input class="inputField" maxlength="10" type="password" matInput placeholder="Enter Password" [formControl]=""&gt;
      &lt;/mat-form-field&gt;
      &lt;div&gt;
              &lt;button mat-button class="otp-btn" type="submit"&gt;Login&lt;/button&gt;
    &lt;/div&gt;
    &lt;br&gt;
  &lt;/form&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.example-container {
    display: flex;
    flex-direction: column;
  }
  
  .login {
      margin-top: 80px;
      height: 450px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      background-color: #274c7c
  }
  .material-icons {  
      margin-left: 2%;
      margin-bottom: 10px;
  }
  .otp-btn {
      margin: 30px 30px 30px 30px;
      margin-left: 10%;
      width: 80%;
      font-size:30px; 
      height: 55px;
      color:white;
      border-radius: 10px;
      background-color: #f6b319;
  }
  
  :host {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  img {
      height: 16%;
      width: 174px;
      margin-left: 15%;
      margin-right: auto;
      padding: 10px;
  }
  div.input {
      position: relative;
  }
  .form {
      display: block; 
      position: relative;
      flex: auto;
      min-width: 0;
      width: 245px !important;
      margin-left:15px;
  }
  .inputField
  {
      width: 90%;
      font-size: 20px;
  
  }
  div.input label {
      position: absolute;
      top: 0;
      transform: translateY(-50%);
      left: 10px;
      background: white;
      padding: 5px 2px;
      color: white;
  }
  
  div.input input {
      padding: 10px 20px;
      font-size: 25px;
      outline: 0;
      color: white;
  }
  
  div.input {
      margin-top: 20px;
      color: white;
  }
  
  
  .example-container &gt; * {
    width: 100%;
  }
  </code></pre>
  
  <p>See <a href="https://stackblitz.com/edit/matinput-materror-jnfyae" rel="nofollow noreferrer">stackBliz</a> for more details.</p>