Stripe elements styling

More
5 years 1 week ago #136786 by Dave B
Replied by Dave B on topic Stripe elements styling
I'd like it to look like the form you just showed me. With the nice box look and outline of the fields. All this is doing is moving it down.

Please Log in or Create an account to join the conversation.

More
5 years 1 week ago #136787 by Dang Thuc Dam
Replied by Dang Thuc Dam on topic Stripe elements styling
Currently, we don't have solution to change stylesheet input boxes of Stripe Card Elements. I will leave this topic open to collect ideas from different customers
Dam

Please Log in or Create an account to join the conversation.

More
5 years 1 week ago #136788 by Dave B
Replied by Dave B on topic Stripe elements styling
Now I am confused. Your site shows defined fields so it's obvious they are the CC fields. Now you say there is no way to make it look that way? How did you make it look that way then?

Please Log in or Create an account to join the conversation.

More
5 years 1 week ago #136790 by Dang Thuc Dam
Replied by Dang Thuc Dam on topic Stripe elements styling
I don't understand your idea "Your site shows defined fields so it's obvious they are the CC fields", please explain it clearly.

Please Log in or Create an account to join the conversation.

More
5 years 1 week ago #136791 by Dave B
Replied by Dave B on topic Stripe elements styling
I want it to look like the site you showed me on your demo site. Yours has space around it and a shadow to separate it from the page background.



Please Log in or Create an account to join the conversation.

More
5 years 1 week ago #136793 by Dang Thuc Dam
Replied by Dang Thuc Dam on topic Stripe elements styling
This is what i added in Custom CSS
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}

Dam

Please Log in or Create an account to join the conversation.

More
5 years 1 week ago - 5 years 1 week ago #136794 by Dave B
Replied by Dave B on topic Stripe elements styling
That's better but how can I get a little space between the Strip/PayPal and the fields like yours has?

mauekay.org/donate
Last edit: 5 years 1 week ago by Dave B.

Please Log in or Create an account to join the conversation.

More
5 years 1 week ago #136809 by Dang Thuc Dam
Replied by Dang Thuc Dam on topic Stripe elements styling
Custom CSS
.jd_predefined_box
{
width:98% !important;
}

Please Log in or Create an account to join the conversation.

More
5 years 1 week ago #136822 by Dave B
Replied by Dave B on topic Stripe elements styling
Sorry, I meant space on the top. Your demo site has a about 20px space above the shadowed field container.

Please Log in or Create an account to join the conversation.

  • Russell Leigh
  • Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
5 years 1 week ago #136829 by Russell Leigh
Replied by Russell Leigh on topic Stripe elements styling
#stripe-card-form {
margin-top: 1rem;
}

Please Log in or Create an account to join the conversation.

Moderators: Dang Thuc DamDang Dam