如何解决条纹元素图标填充问题
我在我的网站上使用条纹元素,但遇到了一些图标样式问题。 我进行了一些搜索并找到了这个 link,但他们已经关闭了该问题已解决的票证。
正如您在我的屏幕截图 here 中看到的那样,该图标与边缘齐平,我希望在左侧有一些填充。
我试过像这样通过我的 JS 添加填充,但它没有改变任何东西。
var style = {
base: {
iconColor: "#fff",padding: "5px 10px 5px 20px",backgroundColor: "#a91537",color: "#fff",fontWeight: "400",fontFamily: "Montserrat,sans-serif",fontSize: "18px",lineHeight: "80px",fontSmoothing: "antialiased",showIcon: false,textIndent: "10px",":-webkit-autofill": {
color: "#fff",},"::placeholder": {
color: "#fff",invalid: {
color: "#fa775a",iconColor: "#fa775a",};
我什至尝试通过 CSS 添加它,但因为它是通过 iframe 引入的,所以我的样式没有任何作用。
解决方法
您需要更改挂载元素的容器的样式,而不是元素本身。例如,如果您将卡片元素安装到 #card-element
,您可以添加一些基本样式,如下所示:
<style>
#card-element {
padding: 12px;
}
</style>
<div id="card-element"></div>
您可以在此处阅读更多相关信息:https://stripe.com/docs/js/element/the_element_container?type=card
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。