ghostchups_code

[cerulean steppe]

👋 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/1229929099275796520

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[dreamy tartan]

Here you can see the issue, the carat is a very light blue color. It is the same as the body text color (Use your saved information)

I have also set the focussed styles for the code input to:

'.CodeInput:focus': {
backgroundColor: stripeTheme.input.active.colorBackground,
borderColor: stripeTheme.input.active.colorBackground,
borderStyle: 'solid',
borderWidth: rem(1),
boxShadow: 'none',
color: 'red',
outline: 'none',
},

[ornate viper]

Hi there, by carat, do you mean the cursor?

[dreamy tartan]

the line: |

[ornate viper]

Is the issue here that the vertical line in the input field is too light against the light background color?

[dreamy tartan]

the issue is I cannot change this specifically for the CodeInput

if I have some html:

<input style="color: red" />

The color of the caret or text cursor is set based on the css color property

in the CodeInput case for Stripe, you use a somewhat hidden input to take user input then copy the result to CodeInput divs after the user has made an entry for that digit. I can customize those divs as they use the .CodeInput class. I.e. i can set the color to red and the text color are reflected as red. However this color is not mirrored on the <input> that Stripe is using to get user input

this screenshot shows that I can use the browser dev tools to set the color on the input which results in the caret being red

the issue is I cannot programatically do that using the Stripe Elements appearance options

[ornate viper]

Got it, give me a few minutes

[dreamy tartan]

no worries

[ornate viper]

No, looks like there's no programmatic way to change the cursor color

[dreamy tartan]

this seems like an oversight if you can change the background color

perhaps something to address in a future release. From a user perspective I would expect the cursor color to match the CodeInput color if set