title: User Agent Style shows as being overridden, but when the page renders, it's not
body: <p>I am trying to hide the autofill style for a password input field that comes in via the user-agent-styles.</p>
  
  <p>When inspecting the element, the computed styles show that the color coming from the user-agent-style is being overridden and #fff is being applied, but the actual computed style is still the one coming from the user-agent.</p>
  
  <p>Any idea on how to get rid of this?</p>
  
  <p><a href="https://i.stack.imgur.com/Tb383.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Tb383.png" alt="enter image description here"></a></p>
  
  <p>Here is the CSS I am using to try and override it:</p>
  
  <pre><code>.password {
      border-right: none;
      background-color: #fff !important;
  }
  #MainContent_txtPassword:-webkit-autofill, input:-internal-autofill- 
  previewed, input:-internal-autofill-selected, textarea:-internal-autofill- 
  previewed, textarea:-internal-autofill-selected, select:-internal-autofill- 
  previewed, select:-internal-autofill-selected {
     background-color: white !important;
  }
  </code></pre>