I'm having an issue styling a Stripe credit card input in a Vue.js application. I'd like to change the background color to #f1f1f1 and the height to 60px, but I'm unable to do this either through the base styles or with css. What am I doing wrong? Ideally, I'd like to target it with css. Here's my code:

loadStripe() {
      card = elements.create("card", {
        style: {
          base: {
            iconColor: '#2A2A2A',
            color: '#2A2A2A',
            fontWeight: 300,
            fontFamily: 'Lato, Open Sans, Segoe UI, sans-serif',
            fontSize: '19px',
            // height: '60px',
            // background: '#f1f1f1',
            '::placeholder': {
              color: '#2A2A2A',
              fontSize: '19px',
            },
          },
        }
      });

Thank in advance!

I'm having an issue styling a Stripe credit card input in a Vue.js application. I'd like to change the background color to #f1f1f1 and the height to 60px, but I'm unable to do this either through the base styles or with css. What am I doing wrong? Ideally, I'd like to target it with css. Here's my code:

loadStripe() {
      card = elements.create("card", {
        style: {
          base: {
            iconColor: '#2A2A2A',
            color: '#2A2A2A',
            fontWeight: 300,
            fontFamily: 'Lato, Open Sans, Segoe UI, sans-serif',
            fontSize: '19px',
            // height: '60px',
            // background: '#f1f1f1',
            '::placeholder': {
              color: '#2A2A2A',
              fontSize: '19px',
            },
          },
        }
      });

Thank in advance!

• javascript
• css
• vue.js
• stripe-payments

• Doesn't look like you can change those properties ~ stripe./docs/stripe-js/reference#elements-create. Have you tried CSS? – Phil Commented Mar 24, 2019 at 2:07
• Yeah I get an error in the console saying you can't change those in the base styles...I tried CSS but it hasn't worked, it seems un-targetable. I tried changing height/bg color in the dev tools and that worked but when I put it in my actual code it doesn't apply.. – Lauren Mastroni Commented Mar 24, 2019 at 2:50
• 1 I don't know the elements that stripe produces so if you could locate where the height and background are set in their CSS, add those CSS selectors to your question – Phil Commented Mar 24, 2019 at 2:57
• 2 Never mind I figured out a hacky solution which is to put a container around it and style that...since it has a transparent background it looks like I styled the input itself – Lauren Mastroni Commented Mar 24, 2019 at 3:53
• 1 Feel free to add your solution as an answer below. It might help others – Phil Commented Mar 24, 2019 at 23:41

3 Answers 3

You can change the background color like below,

style: {
  base: {
    backgroundColor: 'red',
  }
}

According to the documentation: https://stripe./docs/js/appendix/style the method is "backgroundColor". But the same documentation remends so far to make some adjustments directly to the CSS of the element container. And especially for the 'background' and 'height' for me worked better to modify directly the CSS. Working example:

<template>
   ...
   <div id="card-element"></div>
   ...
</template>
<script>
...
    let adjustments = {
      hidePostalCode: true,
      style: {
        base: {
          // backgroundColor: "#cbf5f8",
          fontWeight: "400",
          fontFamily: "Avenir, Helvetica, Arial, sans-serif",
          fontSize: "16px",
          fontSmoothing: "antialiased",
          ":-webkit-autofill": {
            color: "#fce883",
          },
        },
        invalid: {
          iconColor: "#FFC7EE",
          color: "#FFC7EE",
        },
      },
    };
    card = elements.create("card", adjustments); 
...
</script>
<style>
#card-element {
  border: 1px solid currentColor;
  border-radius: 4px;
  height: 50px;
  background: #cbf5f8;
  margin-bottom: 20px;
  padding-top: 10px;
}
</style>

Like described in the official documentation : https://stripe./docs/stripe-js/reference#elements-create , there is no support to add a background color for the input element.

But you can use some hack to the parent element that you has on your HTML code to make it looks like an input and style it like you want.