Stripe elements styling
- Dave B
-
- Offline
- Platinum Member
-
Less
More
4 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
-
Less
More
- Posts: 13020
- Thank you received: 1688
4 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
Dam
Please Log in or Create an account to join the conversation.
- Dave B
-
- Offline
- Platinum Member
-
4 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
-
Less
More
- Posts: 13020
- Thank you received: 1688
4 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
-
4 years 8 months ago #136791
by Dave B
Replied by Dave B on topic Stripe elements styling
- Mr. Dam
-
- Offline
- Administrator
-
Less
More
- Posts: 13020
- Thank you received: 1688
4 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
.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
-
4 years 8 months ago - 4 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
mauekay.org/donate
Last edit: 4 years 8 months ago by Dave B.
Please Log in or Create an account to join the conversation.
- Mr. Dam
-
- Offline
- Administrator
-
Less
More
- Posts: 13020
- Thank you received: 1688
4 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;
}
.jd_predefined_box
{
width:98% !important;
}
Please Log in or Create an account to join the conversation.
- Dave B
-
- Offline
- Platinum Member
-
4 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
-
Less
More
- Posts: 63
- Thank you received: 1
4 years 8 months ago #136829
by Russell Leigh
Replied by Russell Leigh on topic Stripe elements styling
#stripe-card-form {
margin-top: 1rem;
}
margin-top: 1rem;
}
Please Log in or Create an account to join the conversation.
Moderators: Mr. Dam, Dũng Nguyễn Việt
Support
Documentation
Information
Copyright © 2025 Joomla Extensions by Joomdonation. All Rights Reserved.
joomdonation.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.