#tomh0027
left violet
Hi, what's your question?
cunning oak
I passed rule to stripe element and made all input transparent background with white colored text
but the problem is when select country, the options are also white colored and it has white background as default
is it possible to make only the options back colored text?
cunning oak
I passed this rule here to options apperance in stripe element
rules: { ".Input": { backgroundColor: "transparent", fontSize: "12px", fontFamily: "Roboto, sans-serif", color: "#ffffff", padding: "8px", borderColor: "#026C8E", lineHeight: "18px", width: "100%", }, ".Label": { fontFamily: "Roboto, sans-serif", color: "#ffffff", fontSize: "12px", }, },
left violet
Have you tried applying the same rules to .Menu?
left violet
Did it change anything?
cunning oak
nothing
left violet
What's the exact code you're using for .Menu?
cunning oak
".Menu": { backgroundColor: "transparent", color: "#000000", },
I inspected the rendered element and it was as below
it has Input as the only available classname selector
so maybe no way to do that?
left violet
.Input is a class: https://stripe.com/docs/elements/appearance-api?platform=web#form-inputs---labels-above
But I don't know if that's the one we want
cunning oak
yeah, the text color is white because I selected elements with classname Input in the rules
forest lilyBOT
left violet
It won't get archived before we have an answer for you, no worries
cunning oak
I found the it automatically get archived after certain time of inactivity if I am not wrong
left violet
It doesn't look like it's possible to set transparent on menus in the Payment Element. That's mostly for accessibility reasons (e.g. there are often buttons and other text underneath the menu that would make it hard to see what you're selecting from the menu).
cunning oak
It doesn't look like it's possible to set transparent on menus in the Payment El...
I am not gonna make it transparent background
just make it black colored text
exceptionally from other inputs
patent geyser
I don't think this is something thats controllable by the client in general, the browser/os is determining behaviour here. I see different UI in chrome/firefox/safari eg
forest lilyBOT
patent geyser
I'm finding this is the default behaviour -- are you setting a max width somewhere on the payment element that's restricting it?
On a parent container around you payment element you can set, eg:
#container {
margin: auto;
max-width:00px;
}
I didn't set any margins on container
warm sage
👋 PaymentElement assumes width of its parent container
You'd likely want to inspect the styling properties being applied to the div and figure out where the width is coming from
cunning oak
the stripe element is not getting any bigger than 292px wide
warm sage
There must be some parent container/div or styling rule restricting the width. What are you seeing in your chrome dev tools when you inspect the element?
cunning oak
this form is the parent element of Payment Element
I didn't set any width to it
but the problem is even though I increase width of the form, PaymentElement doesn't increase
warm sage
Are you using a third-party css plugin?
I see you have wb-[xxx] w-full classes applied to the email field.
Can you apply the same to StripeElement div?
cunning oak
can I ask one more question?
warm sage
Sure
cunning oak
Is there any way I can use custom inputs and pass values to API or sth?
warm sage
What kind of values exactly?
cunning oak
those card info, address, etc
my client wants to make the form in this view
I found split card elements but not one for address element
warm sage
We have address element here
https://stripe.com/docs/elements/address-element
It can be used with PaymentElement