条纹元素 ::占位符不透明度无法更改

Question

Stripe React 元素的占位符有一个 Opacity: 1 CSS 属性，不能使用样式对象更改。可以更改其他 ::placeholder CSS 属性。

样式对象：

const iframeStyles = {
        base: {
            color: "#276678", //$blue
            fontSize: "30px",
            lineHeight: "38px",
            fontFamily: "Lato",
            fontWeight: 400,
            "::placeholder": {
              color: "#C8D7DE", //$bluepastel
              opacity: 0,
            }
          },
          invalid: {
          },
          complete: {
          }
    };

Firefox 检查输出：

我试过!important，但没用。 opacity 道具不适用。有解决此问题的解决方法吗？

Answer 1

Stripe.js' 样式 api 限制了您可以修改的 css 属性。您不能设置 opacity。他们可能不希望你让任何东西消失。文档列出了您可以覆盖的 css 属性。

https://stripe.com/docs/js/appendix/style

您可以尝试将 00 添加到颜色值。这会将颜色代码变为 rgba，最后两位十六进制数字是颜色的不透明度。

         color: "#C8D7DE00", //$bluepastel (invisible)

条纹元素 ::占位符不透明度无法更改

Stripe Element's ::placeholder opacity cannot be changed

css

payment

frontend

stripe-payments

reactjs