title: Google Chrome autofill background color change?
body: <p>I'm trying to get the autofill background color on my inputs changed.</p>
  
  <p>The accepted answers online seem to be something along the lines of:</p>
  
  <p><a href="https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete">Removing input background colour for Chrome autocomplete?</a></p>
  
  <pre><code>input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active,
  input:-internal-autofill-selected,
  input:-internal-autofill-previewed {
      background-color: white !important;
      -webkit-box-shadow: 0 0 0 30px white inset !important;
  }
  </code></pre>
  
  <p>This seems to work accept in one situation, which is when the fields are already auto filled.</p>
  
  <p>Meaning I refresh the browser and the fields are already pre-filled with a username/password.</p>
  
  <p>When I hover over or click in the input the background color changes. However when I do nothing the <code>box-shadow</code> as no effect and it's still set to the default <code>user agent stylesheet</code>.</p>
  
  <pre><code>input:-internal-autofill-selected {
      background-color: rgb(232, 240, 254) !important;
      background-image: none !important;
      color: rgb(0, 0, 0) !important;
  }
  </code></pre>
  
  <p>I've also tried some random properties with no success.</p>
  
  <pre><code>input:-internal-autofill,
  input:-internal-autofill:hover, 
  input:-internal-autofill:focus, 
  input:-internal-autofill:active,
  </code></pre>
  
  <p>Chrome Version 77.0.3865.90 (Official Build) (64-bit)</p>
  
  <p>Can't figure out how to override this at all. It's like it's been added at the bottom of the css rules with an <code>important</code> so impossible to override?</p>