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.
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 :)