Credit Card placeholder text black on dark theme

AI-generated summary

Credit Card placeholder text black on dark theme

A dark theme issue was reported where the credit card input field’s placeholder text appears black on a dark grey background, making it difficult to read. cwbc attempted to customize the text color using CSS, but was unable to target the element.

JmmyDodger confirmed the issue on their test site and moved the discussion to the UX category for attention. After investigating, JammyDodger found that the issue was specific to Firefox browsers, as the placeholder text appeared grey in Chrome.

The issue has since been fixed, as confirmed by JammyDodger, and the update is available in the discourse-subscriptions plugin.

I’m trying to figure out how to customise the color of the text in the credit card input field. It currently doesn’t work on dark themes for me (black on dark grey).

Using the following in the custom CSS for the theme isn’t working. Any advice would be much appreciated!

input.InputElement[name="cardnumber"] {
    color: white;
}

I don’t seem to be able to select the element at all, I’ve tried various permutation of CSS selectors.

I’m getting that on my test site too:

I’ve moved this over to Contribute > UX to get it some attention. :+1:

I’m not sure how you can target the placeholder text for a short-term fix, though hopefully someone more CSS knowledgable can help. :crossed_fingers:

1 Like

We were struggling getting a consistent repro on this, but I think we’ve narrowed it down to Firefox browser (the placeholder text is grey in Chrome, for instance). Does this track with what you’ve been experiencing?

1 Like

Hi @cwbc :slightly_smiling_face:

This has now been fixed. :+1: If you update your plugin you should see the change.

https://github.com/discourse/discourse-subscriptions/pull/124

5 Likes

This topic was automatically closed after 5 days. New replies are no longer allowed.