search

braintree / braintree-web-drop-in

Braintree Drop-in for the web
MIT License
200 stars 126 forks source link

How to set the placeholder colors of the input fields? #626

Closed jz222 closed 4 years ago

jz222 commented 4 years ago

General information

Version: 1.22.1

Issue description

This is not directly an issue, however, I've been trying to set the placeholder color of the input fields of the dropin with CSS. Unfortunately, it didn't pick up the the custom color. I assume it's possible with hosted fields but I was curious if there was a way to set the placeholder color when using the dropin.

Thanks!

crookedneighbor commented 4 years ago

The reason that setting css rules on your page doesn't work is because the card inputs are contained within Braintree hosted iframes.

You will have to use the card.overrides.styles option when creating Drop-in: https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html#~cardCreateOptions

braintree.dropin.create({
  card: {
    overrides: {
      styles: {
        "::placeholder": {
          color: 'red'
        }
      }
    }
  },