Search code examples
braintree

Change Braintree Placeholder Text Color


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.


Solution

  • 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.