Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Firefox `::placeholder` opacity

See original GitHub issue

Stripe Elements in Safari have an unexpected opacity applied:

Firefox (96.0.1, macOS 11.6.1) Screenshot 2022-02-15 at 14 37 09

Other browsers Screenshot 2022-02-15 at 14 37 26

Using the Firefox devtools the opacity can be ‘fixed’, but there is no way to do this in the Elements appearance config (it shows a warning about .Input::placeholder not supporting opacity). Screenshot 2022-02-15 at 14 41 29

Edit: Seems as though this is just how Firefox styles placeholders

Issue Analytics

State:
Created 2 years ago
Comments:7

Top GitHub Comments

1reaction

tylersmith-stripecommented, Mar 18, 2022

Yep, those points are essentially correct. 👍

1reaction

tylersmith-stripecommented, Mar 17, 2022

Hey @glambert,

There are two primary ways to style Elements, depending on which Elements you’re using.

The Style object is used for styling the card Element, and other individual payment method Elements (e.g., cardNumber, cardExpiry, etc.).

For the context of this thread, and the Payment Element, there is a new styling API we call the Appearance API.

An important note in both of these approaches is that the styles are not loaded into your page directly, but rather into the Stripe Elements iframe(s).