Изменение цвета заполнителя кредитной карты

Question

Я только что добавил функции оплаты с помощью кредитной карты на этот веб-сайт (вам может понадобиться положить товар в корзину из магазина, чтобы затем перейти на страницу оформления заказа).

Внизу вы можете увидеть, куда будут вводиться данные кредитной карты.

Я настроил форму, и одним из моих последних шагов является изменение цвета текста заполнителя. Изображение заполнителей Они выделены на этом изображении.

Я не могу найти код CSS при проверке, где вообще установлен этот цвет.

Есть лидругой способ найти цвет, или кто-нибудь может указать мне правильный код.

Answer 1

Если кто-то еще хочет поменять местозаполнитель или какие-либо другие свойства CSS для элементов кредитной карты в полоску, взгляните на этот jsfiddle, описывающий этот сценарий использования.

Вот предварительный просмотр элементов карточки в полоску с настраиваемым заполнителем.

Вот как вам нужно определить стиль для элементов карты:

var style = {
base: {
  iconColor: '#666EE8',
  color: '#31325F',
  lineHeight: '40px',
  fontWeight: 300,
  fontFamily: 'Helvetica Neue',
  fontSize: '15px',

  '::placeholder': {
    color: '#CFD7E0',
  },
},
};

https://jsfiddle.net/2a9fjyuh/

Answer 2

Введите свой Wordpress Customizer и добавьте этот пользовательский код CSS и отредактируйте его по своему вкусу:

#stripe-card-element.StripeElement.empty {
background: #ffffff30 !important;
}
#stripe-exp-element.StripeElement.empty {
background: #ffffff30 !important;
}
#stripe-cvc-element.StripeElement.empty {
background: #ffffff30 !important;
}

Эта часть контролирует фон заполнителя.Что это значит?#stripe является частью элемента.Если вы увидите, что у вас есть "card-element", "exp-element" и "cvc-element".Каждый редактирует отдельную часть.Один из них отредактирует фон элемента номера кредитной карты, одного элемента даты истечения срока действия и последнего элемента CVC.

#fffff - это код шестнадцатеричного цвета (выберите тот, который соответствует вашему вкусу здесь ).Значение 30 после цветового кода HEX определяет непрозрачность (вы можете удалить его, если хотите, чтобы ваш цвет был сплошным, или просто поиграть с ним от 01 до 99) - выбор за вами.

Играйте с вашим кодом ипосмотрим, чего можно добиться :)