dezel-payment-element-appearance | Stripe Developers | Page 1

wind galleon Jul 14, 2022, 2:26 PM

#

Hi 👋 are you able to see these rules getting applied to the Element, but aren't triggering? Or are they not being put into place?

mortal mantle Jul 14, 2022, 2:32 PM

#

Hi Toby, the initial red border to the .Input does apply so something is working with the alteration. The hover with the blue border does not apply. Thanks!

wind galleon Jul 14, 2022, 2:35 PM

#

Do you have a public page available where we can see the behavior you're describing?

mortal mantle Jul 14, 2022, 3:18 PM

#

https://web.gravitylending.dev/pay/?token=eyJuYW1lIjoiQ0FSTCBUVEpIVEtIIiwiZW1haWwiOiJSQVNIQURHQEdSQVZJVFlMRU5ESU5HLkNPTSIsInBob25lIjoiNTEyLTU1NS03Nzc1IiwibGVuZGVyIjoiQ2FwaXRvbCBDcmVkaXQgVW5pb24iLCJhbW91bnQiOjExMDAsImFwcElkIjoiMzE5OCIsImRlc2MiOiJNZW1iZXJzaGlwIERlcG9zaXQifQ==

Gravity Lending

Darrin Ezell

Gravity Lending - Grab Life by the Payments

Gravity Lending offers auto re-financing for individuals.

wind galleon Jul 14, 2022, 3:20 PM

#

The input fields' outlines change from red to blue when I focus them.

mortal mantle Jul 14, 2022, 3:22 PM

#

I'm in Incognito and I see red/black. Anyone else?

wind galleon Jul 14, 2022, 3:24 PM

#

Red to blue for me:

mortal mantle Jul 14, 2022, 3:28 PM

#

Just checked with a co-worker and he's getting the black too. He'd never seen it before so not a caching issue. Yours is correct.

#

I can see the blue on firefox but not chrome or edge.

wind galleon Jul 14, 2022, 3:32 PM

#

My testing was on Chrome

mortal mantle Jul 14, 2022, 3:33 PM

#

The plot thickens.

wind galleon Jul 14, 2022, 3:40 PM

#

When viewing the style info for a focused field, I'm seeing the border listed as being blue in dev tools. Are you seeing the same, or is yours saying the border is set to black?

mortal mantle Jul 14, 2022, 3:43 PM

#

Strangely, it shows a blue value when I add the psuedo class but if I just click and focus, it's black.

#

OK, I've got all rules in there that are supposed to be in and using inspector to create my :focus on the input I get the results I'm looking for. However, clicking in the input gives me the black border, and the desired shadow. Seems the border is the only sticking point. Very odd behavior.

cinder gyro Jul 14, 2022, 4:26 PM

#

Hello! I'm taking over and catching up now...

#

I just tried the page in question and am seeing a blue border when fields in the Payment Element are focused:

Captured_on_2022-07-14_at_09.28.482x.png

#

That's in Chrome, let me try other browsers...

#

Same in Firefox and Safari for me.

#

The page hasn't been updated, correct? It's still showing the same issue for you with the black borders?

mortal mantle Jul 14, 2022, 4:51 PM

#

Hi Rubeus, yes still has black borders although the shadow property is coming through now.

cinder gyro Jul 14, 2022, 4:52 PM

#

🤔

#

Ah!

Captured_on_2022-07-14_at_09.53.362x.png

#

I had to change my operating system's accent color to get that. I think that's the difference.

#

One moment, I think I may know what to adjust...

#

In your .Input:focus rule try adding outline: '1px solid blue' and see if that has an effect.

mortal mantle Jul 14, 2022, 5:27 PM

#

I'll be danged, that pretty much did it but I also had to make the border transparent to get the desired effect. Thanks for the suggestion as it was the straw that broke the camelCases back. Here's what I ended up using.

            '.Input:focus': {
                border: '1px solid transparent',
                boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.08) inset, 0 0 8px rgba(15, 37, 84, 0.6)',
                outline: '1px solid rgba(15, 37, 84, 0.8)'
            },

#

cinder gyro Jul 14, 2022, 5:29 PM

#

Awesome! 🙂

mortal mantle Jul 14, 2022, 5:30 PM

#

One thing I did notice was that rgba needs a preceding zero in the decimal for opacity and to have spaces.

This can be closed now. Thank you everyone for your help. Much appreciated and cheers!

#dezel-payment-element-appearance