title: Change the color of autofill for Stripe payment with NextJS
body: <p>We are using Stripe's Element payment feature with NextJS.
  Only the part of <a href="https://github.com/stripe-samples/nextjs-typescript-react-stripe-js" rel="nofollow noreferrer">this link</a> that is relevant to element payments is taken out and used.</p>
  <p>I use</p>
  <pre><code>.StripeElement--webkit-autofill {
    background-color: #2E365630 !important;
  }
  </code></pre>
  <p>this code(<a href="https://stackoverflow.com/questions/46895436/stripe-elements-given-code-dont-show-the-custom-payment-form">reference</a>) to change the background color when I fill in the number in the auto-complete function when using a credit card, but it doesn't change.</p>
  <p>I'm not sure how relevant this is, but</p>
  <pre><code>const CARD_OPTIONS = {
    iconStyle: 'solid' as const,
    style: {
      base: {
        iconColor: '#FFFFFF',
        color: '#FFFFFF',
        backgroundColor: '#2E365630',
        fontWeight: '500',
        fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
        fontSize: process.browser ? (window.innerWidth &lt; 480 ? &quot;16px&quot; : &quot;20px&quot;) : &quot;16px&quot;,//'16px',
        fontSmoothing: 'antialiased',
        ':-webkit-autofill': {
          color: '#FFFFFF',
        },
        '::placeholder': {
          color: '#FFFFFF80',
        },
      },
      invalid: {
        iconColor: '#ef2961',
        color: '#ef2961',
      },
    },
  };
  </code></pre>
  <p>this is the card options.</p>
  <p>I couldn't find an explanation of the option to change the background of autofill in the official documentation (there was one for text color), if you don't mind me asking.</p>