无法更改条带元素的：：占位符不透明度

Question

Stripe React元素的占位符具有style CSS属性，该属性不能使用Opacity: 1对象进行更改。可以更改其他::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 inspect输出：

​

​

我试过!important，但它不起作用。不透明道具就是不适用。有没有解决这个问题的方法？

Answer 1

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

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

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

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