#day_elements-appearance-api
willow gardenBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1242137541449224324
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
tall lake
ok, if not - any plan's on allowing this type of behavior in the future or can we make a request to do so? i would like for the individual label to change color to match my input's border when the input has focus
edgy sparrow
Have you tried using .Tab--selected ?
Ah whoops
You are talking about inputs
Not tabs
edgy sparrow
Hmm what about .Input --empty:focus
tall lake
will i be able to change a label's color this way?
in the example, i would like for "ZIP" to be blue. I have been able to move the label and a lot of other things i needed to do to style it this way, but just wasn't sure how to get this individual label to change when it's input has focus
edgy sparrow
I haven't tested this but I think it would change the color for each label when they are selected and empty
tall lake
for comparison of the styling i am trying to immitate
i'll test real quick
would i change color in your scenario?
'-webkit-text-fill-color' is changing the value of the input
willow gardenBOT
tall lake
as well as color
acoustic steppe
Hi 👋
I'm taking over as my colleague needs to go. Give me a minute to catch up
tall lake
ok thanks
acoustic steppe
Okay so it looks like you would need to use the :focus pseudoclass we document for the .Input class here: https://docs.stripe.com/elements/appearance-api?platform=web#form-inputs---floating-labels
You can see an example of how to use the rules parameter to use pseudo classes to control appearance here: https://docs.stripe.com/elements/appearance-api?platform=web#rules
tall lake
but will this allow me to change the label of the input? my understanding is that it will change color within the input, but not the label as label is .Label
acoustic steppe
No you do not have control over the text in the label
tall lake
That's my question, how can I change the font color of the input label when the input has focus? It seems that .CheckboxLabel and .TabLabel both provide the class :focus but I am not seeing that on .Label. So I'm not sure how would I go about changing the color of the label when it's input has focus
acoustic steppe
A label does not get focus so that would never occur
tall lake
but the input that label is tied would get focus. is there a way that i can use that to change the color of the label? essentially creating a mui style input
acoustic steppe
Not that I am aware of
tall lake
ok
is there a way that i could set the color of a label for an individual input? ie. set the label color to green for the credit number input?
or is it all or nothing
acoustic steppe
The rules and variables exposed by the Appearance API are the only ways we allow you to manipluate the appearance of Stripe elements
tall lake
are there any planned changes? is there a way to request changes?
acoustic steppe
To be kept aware of planned changes, I recommend subscribing to the developer digest. https://docs.stripe.com/upgrades#stay-informed
As for making a feature request, I can file one for you
tall lake
That would be great. I would just need to have the ability to change the input label color when the input of that label has focus.
acoustic steppe
Okay so, to translate it to the design of the Appearance API, you would like the label for a given input to have the same rule applied as the input when the input gets focus?
tall lake
no, i believe that would mean that the input's label would also match the input's text color, correct? i wouldn't want that
i would want it to match the border
acoustic steppe
Okay... yes I think I can understand that. So the same hex code would be applied to both Input.border-color and Label.color
tall lake
yep, it would look something like this:
does not have focus - the one without the blue border
has focus - the one with the blue border
acoustic steppe
Makes sense. Feature request filed
tall lake
thanks
acoustic steppe
Happy to help 🙂