How to style pseudo classes for the Adyen input fields

[ashrafnazar]

Is your feature request related to a problem? Please describe.
I would like to be able to style a pseudo class in :focus, for the input fields in the AdyenCheckout instance.

Describe the solution you'd like
A way to style pseudo classes, so potentially an onFocus property in the CoreOptions interface or a way to do the same thing inside the styles object, as part of the PaymentMethodOptions generic type.

Describe alternatives you've considered
I've attempted to use the second argument (element) inside the onChange property within the CoreOptions interface, but have not found a way to do so.

Additional context
N/A

[m1aw]

Hello @ashrafnazar

What would be the objective here? I ask because we are going to be rolling out CSS variables in V6 and you will be able to customise it that way.
I wonder however if your use case would be covered. Can you share a few more details on what you are trying to accomplish?

[ashrafnazar]

Hey @m1aw - it's to match our current designs, so when a user tabs through to an input field, or is on it, then we would like the outline property to change, i.e. its stroke width and colour. Hope that makes sense

[m1aw]

Is it currently not possible just by using CSS?

[ashrafnazar]

Hi @m1aw - because the input fields are inside iframes, I don't think it's as simple as updating the CSS. Unless I'm mistaken?

[ashrafnazar]

@m1aw I've been told that I can style the parent element, i.e. the span with the data-cse attribute, but unless I do some sort of hack, there isn't a clean way to update the :focus state of it