Search code examples
cssreactjsfrontendstripe-paymentspayment

Stripe Element's ::placeholder opacity cannot be changed

Stripe React elements' placeholders have an Opacity: 1 CSS property, that cannot be changed using the style object. Other ::placeholder CSS properties can be changed.

Style object:

const iframeStyles = {
        base: {
            color: "#276678", //$blue
            fontSize: "30px",
            lineHeight: "38px",
            fontFamily: "Lato",
            fontWeight: 400,
            "::placeholder": {
              color: "#C8D7DE", //$bluepastel
              opacity: 0,
            }
          },
          invalid: {
          },
          complete: {
          }
    };

Firefox inspect output:

I have tried !important, but it didn't work. The opacity prop just doesn't apply. Is there any workaround to solve this issue?

Solution

  • Stripe.js' styling api limits which css properties you can modify. You cannot set opacity. They probably don't want you to make anything disappear. The documentation lists which css properties you may override.

    https://stripe.com/docs/js/appendix/style

    You could try adding 00 to the color value instead. This will turn the color code to rgba, and the two last hex digits is the opacity of the color.

             color: "#C8D7DE00", //$bluepastel (invisible)