Stripe elements styling

Dave B
Offline
Platinum Member

More

3 years 8 months 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.

Mr. Dam
Offline
Administrator

More

3 years 8 months ago #136787 by Mr. Dam

Replied by Mr. 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.

Dave B
Offline
Platinum Member

More

3 years 8 months 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.

Mr. Dam
Offline
Administrator

More

3 years 8 months ago #136790 by Mr. Dam

Replied by Mr. 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.

Dave B
Offline
Platinum Member

More

3 years 8 months 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.

Mr. Dam
Offline
Administrator

More

3 years 8 months ago #136793 by Mr. Dam

Replied by Mr. 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.

Dave B
Offline
Platinum Member

More

3 years 8 months ago - 3 years 8 months 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: 3 years 8 months ago by Dave B.

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

Mr. Dam
Offline
Administrator

More

3 years 8 months ago #136809 by Mr. Dam

Replied by Mr. 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.

Dave B
Offline
Platinum Member

More

3 years 8 months 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

More

3 years 8 months 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: Mr. Dam, Dũng Nguyễn Việt

Powered by Kunena Forum

Stripe elements styling

Support

Documentation

Information

Connect Us