css - 如何修复过期/CVC/ZIP 的定位

Question

我在我的网站上创建了一个 Stripe Elements 卡片表单，但我在使用它时遇到了一些问题。现在，它看起来像这样:

如您所见，过期时间和 CVC 输入相互压缩。

如果我填写它们，则 ZIP 输入不在框架内。

这似乎是因为我在为卡片元素定义样式时向占位符元素添加了字母间距。

var style = {
  base: {
    color: "#fff",
    fontFamily: '"Source Sans Pro", sans-serif',
    textTransform: "uppercase",
    fontSize: '12px',
    iconColor: "#bbb",
    lineHeight: "37px",
    maxHeight: "37px",
    verticalAlign: "middle",
    letterSpacing: "0.5px",
    '::placeholder': {
      color: '#bbb',
      fontFamily: '"Source Sans Pro", sans-serif',
      letterSpacing: "2px",
    },
    '::selection': {
      color: '#fff',
      backgroundColor: '#333',
    }
  }
};

从::placeholder 中删除字母间距可以解决问题，但我真的很想保留它以便与我网站其余部分的风格保持一致。

有谁知道我该如何解决这个问题？

谢谢。

Answer 1

看起来这是您的主要 letterSpacing 和 ::placeholder letterSpacing 值不匹配的结果；如果您将 base.letterSpacing 值也设置为 2px，它似乎可以工作(尽管它确实会暂时将 CVC 推到一边)。