设置 Recurly.js 输入字段的样式

Question

有人知道如何直接设置 recurly.js 生成的输入字段的样式吗？它通过 iframe 将输入字段注入到页面中。他们的文档提供了添加到 iframe 周围的 div 或 span（无论你使用什么）的类，但它们的样式已经加载到 iframe 中，我不知道如何覆盖它们。

谢谢！

循环文档

Answer 1

iframe 中注入的支付字段的样式可以通过 recurly 注册页面中的 recurly.config() 的 CSS 部分来完成 https://dev.recurly.com/docs/getting-started-1#section-样式卡字段。  这使得在加载循环注册页面时可以将样式应用于托管支付字段。

Answer 2

更新链接：https://dev.recurly.com/docs/recurly-js-getting-started

您可以将样式添加到recurly.config

recurly.config({
  publicKey: ...,
  style: {
    all: {
      fontSize: '16px',
      fontColor: 'green',
      placeholder: {
        color: 'gray !important',
        fontWeight: 'bold'
      }
    }
  }
});

Answer 3

我觉得这很令人困惑，因为要最大限度地控制你的循环输入样式，你需要同时执行 css 和 js:

• Rachel 提到的页面已移至 https://github.com/recurly/recurly-integration-examples/blob/main/public/minimal/index.html
• 看来你只能通过样式配置设置有限的东西https://recurly.com/developers/reference/recurly-js/#styling-elements
• 其余的样式是在您自己的应用程序或网站的 iframe 外部完成的 - 如果您查看 iframe 的父级，您会看到一些 Recurly 插入的类

  recurly-element

  recurly-element-card

  recurly-element-invalid

  recurly-element-card-invalid

  。有关类的文档：https://recurly.com/developers/reference/recurly-js/#css-classes
• 如果某些属性似乎不像填充那样应用，很可能是因为您正在使用 Recurly 自己的 css

  <link href="https://js.recurly.com/v4/recurly.css" rel="stylesheet" type="text/css">

  ，它设置了输入的高度，因此您可能需要巧妙地并覆盖它们的一些样式

弄清楚这个问题比我愿意承认的要花更长的时间，但似乎我并不孤单。