title: How can I overwrite styles of an autofilled input when using Chakra UI?
body: <p>I'm styling my inputs inside <a href="https://chakra-ui.com/docs/theming/customize-theme" rel="nofollow noreferrer">Chakra UI's extendTheme function</a> however I'm struggling to style an input that has been autocompleted. Using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill" rel="nofollow noreferrer"><code>:autofill</code></a> pseudo selector doesn't seem to have any bearing because the browser (Chrome) has its own styles set with <code>!important</code> which forces the input's background colour to be white.</p>
  <pre><code>const theme = extendTheme({
    components: {
      Input: {
        baseStyle: {
           field: {
              bg: &quot;gray.700&quot;,
              color: &quot;gray.300&quot;,
              _hover: {
                bg: &quot;gray.500&quot;,
              },
              _focus: {
                bg: &quot;gray.500&quot;,
              },
              // This does not work
              _autofill: {
                bg: &quot;gray.500&quot;,
              }
           }
        }
      }
    }
  })
  </code></pre>