Как исправить положение истечения срока действия / CV C / ZIP - PullRequest
Новая
       5

Как исправить положение истечения срока действия / CV C / ZIP

0 голосов
/ 10 января 2020

Я создал форму карты Stripe Elements на своем веб-сайте, но у меня возникли некоторые проблемы с ней. Прямо сейчас это выглядит так:

enter image description here

Как вы можете видеть, входы expiry и CV C сведены друг с другом.

Если я их заполню, то вход ZIP находится за рамкой.

enter image description here

Похоже, это потому, что я добавил Межбуквенный интервал для элемента-заполнителя при определении стиля для элемента моей карты. 

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 решает проблему, но мне бы очень хотелось сохранить его, чтобы выровнять со стилем остальной части моего сайта.

Кто-нибудь знает, как я могу решить эту проблему?

Спасибо.

1 Ответ

0 голосов
/ 10 января 2020

Похоже, что это результат несоответствия между вашими основными letterSpacing и ::placeholder letterSpacing значениями; если вы сделаете значение base.letterSpacing также 2px, то оно, похоже, будет работать (хотя оно временно сбрасывает sh CV C со стороны).

...