#css #reactjs #frontend #stripe-payments #payment
Вопрос:
Заполнители элементов 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
, но это не сработало. Опора непрозрачности просто неприменима. Есть ли какой-либо обходной путь для решения этой проблемы?
Ответ №1:
Stripe.js» api стилей ограничивает, какие свойства css вы можете изменять. Вы не можете установить opacity
. Они, вероятно, не хотят, чтобы ты заставлял что-то исчезать. В документации перечислены свойства css, которые вы можете переопределить.
https://stripe.com/docs/js/appendix/style
Вместо этого вы можете попробовать добавить 00
значение цвета. Это превратит цветовой код в rgba, а две последние шестнадцатеричные цифры будут непрозрачностью цвета.
color: "#C8D7DE00", //$bluepastel (invisible)
Комментарии:
1. Если подумать, то это вполне понятное решение Stripe. Цвет RGBA-это правильный путь.