KuVana

[swift dawn]

Hi, is this screenshot an example of what you want to show? Or is this what you've been able to make work so far?

[weary plinth]

It's what I want to show.

Here is what I have so far

[swift dawn]

Looking ..

[junior gyro]

👋 I'm looking with a colleague but CSS is not my forte

@weary plinth so you can use rules like this: ``` appearance: {
theme: 'stripe',

        variables: {
          colorPrimary: '#0570de',
          colorBackground: '#aaaaaa',
        },
        rules: {
          '.Input': {
            border: '1px solid #FF0000',
          },

          '.Input:hover': {
            border: '1px solid #00FF00',
          },

          '.Input--selected': {
            border: '1px solid #0000FF',
          },

          '.Input--invalid': {
            border: '1px solid #AAAAAA',
          },

          // See all supported class names and selector syntax below
        }
      }
    };```

does that kind of match what you're after?

[weary plinth]

Yeah, this what I've added to get the last picture (email one)

          rules: {
            '.Label': {
              transition: 'color 200ms ease-out, transform 150ms ease-out',
            },
            '.Label--resting': {
              paddingBottom: theme.spacing(1),
            },
            '.Label--floating': {
              marginTop: `-${theme.spacing(1)}`,
              textShadow: theme.colors.white,
              textTransform: 'scale(0.78) translateY(-30%) !important',
            },
            '.Input': {
              border: `1px solid ${theme.colors.neutral30}`,
              paddingTop: '0px',
              padding: '0px',
              paddingBottom: theme.spacing(.5),
              paddingLeft: theme.spacing(1.5),
              color: theme.colors.black
            },
            '.Input:focus': {
              borderColor: 'var(--colorPrimary)',
              boxShadow: '0 0 0 1px var(--colorPrimary)',
            },
            '.Input--invalid': {
              borderColor: 'var(--colorDanger)',
              boxShadow: '0 0 0 1px var(--colorDanger)',
            },
          },
          variables: {
            spacingUnit: '1px',
            colorText: theme.colors.neutral50,
            colorPrimary: theme.colors.primary50,
            colorDanger: theme.colors.critical50,

          },

I'm mainly trying to figure out how to add a ::before on the .Label--floating or if it's possible at all

[junior gyro]

yeah sorry CSS is not my strong suit, I thought you asked a high level question and not that you were already deep down the CSS rabbit hole :p

[weary plinth]

Oh 😅 yeah, makes sense

[junior gyro]

I am dubious you can get to that "border stops when the text is in the middle of it" behaviour inside PaymentElement

I can ask, there's just a part of me that kind of goes "but why though"

[weary plinth]

It's a pretty common Input style, so it'd be nice to see it as an option on the Elements in the future