Change Braintree Placeholder Text Color

Question

Is there any way to change the placeholder text color in a Braintree javascript generated hosted field? I don't see it as one of the options you can pass into the constructor. Our design is on a dark background, and the placeholder values aren't visible.

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

There is a way to change the placeholder color, which isn't documented since it's not a 100% fix.

However, in your JS you could do the following:

braintree.hostedFields.create({
  client: clientInstance,
  styles: {
    'input': {
      'font-size': '14pt'
    },
    'input.invalid': {
      'color': 'red'
    },
    'input.valid': {
      'color': 'green'
    },
    '::-webkit-input-placeholder': {
      'color': 'pink'
    },
    ':-moz-placeholder': {
      'color': 'pink'
    },
    '::-moz-placeholder': {
      'color': 'pink'
    },       
    ':-ms-input-placeholder': {
      'color': 'pink'
    },
},

This isn't a 100% fix because not all browsers support even adding a placeholder, so when styling the placeholder element, the browser prefixes are needed so that each browser can attempt to render the style you want. If a customer goes to access this outside of a browser specified, however, it won't be a fix.