样式化 Recurly.js 输入字段答案

【问题标题】：Styling Recurly.js input fields样式化 Recurly.js 输入字段
【发布时间】：2016-05-12 17:02:50
【问题描述】：

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

谢谢！

recurly docs

【问题讨论】：

标签： recurly

【解决方案1】：

可以通过循环注册页面https://dev.recurly.com/docs/getting-started-1#section-styling-card-fields 中的 recurly.config() 的 CSS 部分对 iframe 中注入的支付字段进行样式设置。这样可以在加载循环注册页面时将样式应用于托管支付字段。

【讨论】：

好的。那么，这是否意味着我可以将样式直接添加到 recurly.config() 中的样式选项中，例如边框、边框颜色、填充、宽度等……或者我是否需要在注册产品时启动这些样式？
iframe 的托管支付字段样式在 Recurly.config() 的样式部分中配置。非 iframe 样式将通过表单的常规 CSS 样式来完成。
@RachelQuick 链接断开

【解决方案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'
      }
    }
  }
});

【讨论】：