Add style options when initializing the Stripe Element object, like so:
var style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
lineHeight: '24px',
iconColor: '#c4f0ff',
color: '#fff',
fontSmoothing: 'antialiased',
fontWeight: 500,
'::placeholder': {
color: '#ffffff',
},
':-webkit-autofill': {
color: '#ffffff',
}
},
invalid: {
iconColor: '#FFC7EE',
color: '#FFC7EE',
},
};
View all Element options more
Tue Dec 12, 2017 5:00 PM
Keep footer at the bottom of page
When your content doesn't fill the page, the footer won't stay at the bottom of the page by default.
There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed. I don't like these hacky solutions that provide inconsistent results. Using CSS flex, you can achieve the desired results consistently using only CSS.
First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample.
<body class="sample-body">
...
</div>Next, wrap your content like so:
<body class="sample-body">
<div class="sample-content">
...
</div>
<footer>
...
</footer>
</body>In your CSS, add styles to display the body as a flex column using vertical-height:
.sample-body {
display: flex;
min-height: 100vh;
flex-direction: column;
}then make sure that the content takes up the full column:
.sample-content {
flex: 1;
}