title: How to prevent Chrome from changing font when autofilling username/password?
body: <p>I have a login form with username and password inputs. In Chrome on Windows (doesn't happen in other browsers or on a Mac), when hovering over a saved username from the Chrome password manager, the font changes. The font change then changes the width of the input, throwing my alignment out of whack.</p>
  
  <p>Obviously I can set a fixed width to my input to save my alignment but that doesn't really solve the problem, just puts a band-aid on it. What I really want is to prevent the font change in the first place.</p>
  
  <p>I've tried targeting the input with <code>:-webkit-autofill</code> and putting <code>!important</code> all over my input's css just to see if anything would stick but no dice.</p>
  
  <p>Codepen <a href="https://codepen.io/shainanigans-1472169587/pen/JqdNqE" rel="noreferrer">here</a>. You'll need to be in Chrome on Windows and use Google's password manager.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form&gt;
      &lt;label&gt;
          &lt;input type="text" name="username" placeholder="Username" required /&gt;
      &lt;/label&gt;
      &lt;label&gt;
          &lt;input type="password" name="password" placeholder="Password" required /&gt;
      &lt;/label&gt;
    &lt;button type="submit"&gt;Login&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>// setting font for more exaggerated difference
  * {
    font-family: Times, "Times New Roman", serif;
  }
  
  // why doesn't this or anything else work?
  input {
    &amp;:-webkit-auto-fill {
      &amp;,
      &amp;:hover,
      &amp;:focus {
      font-family: Times, "Times New Roman", serif !important;
      }
    }
  }
  </code></pre>
  
  <p>Any clues on preventing this font change would be appreciated!</p>