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

hgqdbh6s 于 2023-01-04 发布在 React

关注(0)|答案(2)|浏览(131)

Stripe React元素的占位符有一个Opacity: 1 CSS属性，不能使用style对象更改。其他::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，但是不起作用。不透明属性不适用。有什么解决这个问题的方法吗？

reactjs

来源：https://stackoverflow.com/questions/69050279/stripe-elements-placeholder-opacity-cannot-be-changed

2条答案

按热度按时间

pexxcrt21#

Stripe.js的styling API限制了你可以修改的css属性。你不能设置opacity。他们可能不希望你让任何东西消失。文档列出了你可以覆盖的css属性。
https://stripe.com/docs/js/appendix/style
你可以试着把00加到颜色值中，这会把颜色代码变成rgba，最后两个十六进制数字是颜色的不透明度。

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

赞(0）回复(0）举报 2023-01-04

qgelzfjb2#

如果您正在React Native中使用条纹卡，则可以为占位符颜色添加此选项。

cardStyle={{
      textColor: '#000000', // use this actual Text
      placeholderColor: '#A9A9A9' // use this for Placeholder
    }}

卡字段的完整代码。

<CardField
    postalCodeEnabled={false}
    placeholders={{
      number: '4242 4242 4242 4242',
    }}
    cardStyle={{
      textColor: '#000000',  // use this actual Text
      placeholderColor: '#A9A9A9' // use this for Placeholder
    }}
    style={{
      width: '100%',
      height: 50,
      marginVertical: 30,
    }}
    onCardChange={cardDetails => {
      fetchCardDetails(cardDetails)
    }}
    onFocus={focusedField => {
    }}
  />

赞(0）回复(0）举报 2023-01-04

我来回答

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

2条答案

相关问题

热门标签

最新问答