#BrianC-styling-elements

1 messages · Page 1 of 1 (latest)

outer forge
spiral cove
#

Thanks, but input border is not affected. Here is a customization of the the empty class on the fiddle.

.gtc-stripe-empty {
-webkit-flex: 1;
-ms-border-radius: 0.125rem;
border-radius: 0.125rem;
min-height: 3rem;
margin-right: .5rem;
border-color: #ADADAD;
border-width: 1px;
}

It seems that certain elements are not controlled. Technically this should create a 1px border around the input boxes. Correct?

outer forge
#

I think there are limits on what css styling can be done. Let me see if I can that doc

spiral cove
#

I certainly hope not. A border around a text input is probably the most basic styling one could ask for 🙂

#

I'm thinking it is controlled somewhere else. We tried overriding the
"base
The base class applied to the container. Defaults to StripeElement." iin our CSS and that didn't work either. Assuming it's a frame, we just need to know what style class name is being applied.

outer forge
#

So unfortunately Elements does not support borders specifically. You will need to put a border on the HTML element that the Stripe Element is in

spiral cove
#

OK. Thanks

spiral cove
#

Here is the solution:

  1. Create a class for the wrapper div that sets the border-color, border-width and most importantly a border-style needs to be specified.

.stripe-card-border { border-color: #ADADAD; border-width: 1px; border-style:solid; margin-bottom:2rem; }

  1. Add the class to the card-element div
    <div id="card-element" class="card-element **stripe-card-border**"> <!-- a Stripe Element will be inserted here. --> </div>

  2. From there, the border can be controlled via the classes as such

.gtc-stripe-focus { border-color: #2199e8; border-width: 1px; border-style: solid; margin-bottom: 2rem; }

Here is the JS code:

const elements = stripe.elements();

   var style = {
       iconColor: 'blue',
       color: '#000',
       lineHeight: '48px',
       fontWeight: '500',
       fontFamily: 'Poppins, sans-serif',
       fontSize: '1.5rem',
       fontSmoothing: 'antialiased',
       ':-webkit-autofill': {
           color: '#000',
       },
       '::placeholder': {
           color: '#7b7c7e',
       },
       invalid: {
           iconColor: 'red',
           color: 'red',
       },
   };
   // Custom Classes
   var elementClasses = {
       focus: 'gtc-stripe-focus',
       empty: 'gtc-stripe-empty',
       invalid: 'gtc-stripe-invalid',
       valid: 'gtc-stripe-focus'
   };

   const card = elements.create('card', {style: style, classes:elementClasses});
#

I hope this helps someone else.

strange iron
#

Awesome, thanks a lot for sharing!

spiral cove
#

👍