Changing Credit Card Placeholder color

Question

I have just added credit card payment features to this website (you may need to place an item in your basket from the shop in order to then go to the checkout page).

At the bottom you can see where credit card details are going to get entered.

I have customized the form and one of my last steps is to change the colour of the placeholder text. Image of Placeholders These are highlighted in this image.

I can't find the CSS code when inspecting as to where this color is set at all.

Is there another way I can find the colour or could anyone point me to the correct code.

score 14 · Answer 1 · answered Jul 07 '19 at 18:12

If anyone else is still looking to change placeholder or any other css properties of stripe credit card elements then have a look on this jsfiddle covering this usecase.

Here is the preview of stripe card elements with customised placeholder

This is how you need to define style for card elements :

var style = {
base: {
  iconColor: '#666EE8',
  color: '#31325F',
  lineHeight: '40px',
  fontWeight: 300,
  fontFamily: 'Helvetica Neue',
  fontSize: '15px',

  '::placeholder': {
    color: '#CFD7E0',
  },
},
};

https://jsfiddle.net/2a9fjyuh/

score 0 · Answer 2 · answered Jan 13 '20 at 16:22

0

Yeah, we can customize stripe elements using CSS while creating a card or paymentRequestButton elements in JS.

React Elements for Stripe https://stripe.dev/elements-examples/

Code Samples: https://github.com/stripe/elements-examples/

answered Jan 13 '20 at 16:22

Milan Kamilya

2,188
1
31
44

score -1 · Accepted Answer · answered May 19 '18 at 15:05

-1

Enter your Wordpress Customizer and add this custom CSS code and edit it to your taste:

#stripe-card-element.StripeElement.empty {
background: #ffffff30 !important;
}
#stripe-exp-element.StripeElement.empty {
background: #ffffff30 !important;
}
#stripe-cvc-element.StripeElement.empty {
background: #ffffff30 !important;
}

This part controls the background of the placeholder. What does it mean? The #stripe is part of an element. If you will see you have "card-element", "exp-element" and "cvc-element". Each edits a different part. One will edit the background of the credit card number element, one of the expiration date element and last of the CVC element.

The #fffff is a code of a HEX color (choose one that fits your taste here). The 30 behind the HEX color code defines opacity (you can delete it if you want your color to be solid, or just play with it from 01 to 99) - the choice is yours.

Play with your code and see what you can achieve :)

answered May 19 '18 at 15:05

Haris

545
3
21

Hi, That only changes the background colour, and not the placeholder text colour. Even when adding the color: CSS it still not changing the text colour for the placeholder text. Any ideas on how I can achieve this? – Harvey May 20 '18 at 10:17
That won't be possible. The part that shows the credit card number is an iframe - it picks up javascript and CSS from Stripe side and can't be edited with customizing CSS in the way you want. You may want to contact them (https://support.stripe.com/) directly and ask them how to edit the .js file so it suits your needs. – Haris May 20 '18 at 19:39
Ahh okay, thanks for looking into it anyway. I may contact them to ask the question. Or change the colours of the form to better suit the place holder text – Harvey May 20 '18 at 19:50
That is a solution too - change the form color, although I would still advise you to contact them so you will be able to customize that part too :) – Haris May 20 '18 at 20:42

Changing Credit Card Placeholder color

3 Answers3

Linked