条纹元素的 ::placeholder 不透明度无法更改答案

【问题标题】：Stripe Element's ::placeholder opacity cannot be changed条纹元素的 ::placeholder 不透明度无法更改
【发布时间】：2021-11-02 02:40:31
【问题描述】：

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 道具不适用。有什么办法可以解决这个问题吗？

【问题讨论】：

标签： css reactjs frontend stripe-payments payment

【解决方案1】：

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

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

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

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

【讨论】：

仔细想想，Stripe 的决定是可以理解的。 RGBA 颜色是要走的路。