Stripe Element's ::placeholder opacity cannot be changed

Question

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?

Håken Lid · Accepted Answer · 2021-09-03T20:46:32.097

4

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)

edited Sep 03 '21 at 20:46

answered Sep 03 '21 at 20:40

Håken Lid

22,318
9
52
67

Thinking about it, it is an understandable decision from Stripe. RGBA color is the way to go. – Alan Jereb Sep 04 '21 at 13:03
Useful HEX opacity table here: https://stackoverflow.com/a/8254129/1904943 . If you define a Stripe.com INPUT element (e.g. "card") as a variable (`var elements = stripe.elements(); ...`) - sample code here: https://github.com/bradtraversy/php_stripe_paypage/blob/master/js/charge.js - then you can style the input placeholder text, opacity per https://stripe.com/docs/js/appendix/style , e.g. `... '::placeholder' : { color: #8000807F } ... ` , where `#800080` is HEX for the color purple, and `7F` is 50% opacity. – Victoria Stuart May 19 '22 at 22:08

score 0 · Answer 2 · answered Jan 03 '23 at 13:45

if you are using card for Stripe in React Native so you can add this for Placeholder Color.

cardStyle={{
      textColor: '#000000', // use this actual Text
      placeholderColor: '#A9A9A9' // use this for Placeholder
    }}

Full code for card Field.

<CardField
    postalCodeEnabled={false}
    placeholders={{
      number: '4242 4242 4242 4242',
    }}
    cardStyle={{
      textColor: '#000000',  // use this actual Text
      placeholderColor: '#A9A9A9' // use this for Placeholder
    }}
    style={{
      width: '100%',
      height: 50,
      marginVertical: 30,
    }}
    onCardChange={cardDetails => {
      fetchCardDetails(cardDetails)
    }}
    onFocus={focusedField => {
    }}
  />

Stripe Element's ::placeholder opacity cannot be changed

2 Answers2

Linked