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

【问题标题】：Formatting Recurly.js input fields格式化 Recurly.js 输入字段
【发布时间】：2016-05-27 21:38:32
【问题描述】：

我正在构建一个表单来通过 Recurly 处理付款。 non-recurly.js 字段使用 Bootstrap 进行布局。

我可以设置包含 DIV 的样式以获取边框和边框半径以匹配 Bootstrap 字段，但 Bootstrap 会在输入字段上设置填充：

padding: 6px 12px;

...我相信您通过递归配置传递了实际输入字段的样式，所以我尝试了这个：

style: {
        all: {
            fontFamily: 'Verdana',
            fontSize: '14px',
            fontWeight: 'normal',
            padding: '8px'
        },
        number: {
            placeholder: 'Credit card number'
        },
        month: {
            placeholder: 'Exp. Month (mm)'
        },
        year: {
            placeholder: 'Exp. Year (yy)'
        }
    }

...但它只是忽略了填充。某处是否有 Recurly.js 的“支持”样式选项列表？有谁知道如何在 iFramed/injected 输入字段上进行填充？

【问题讨论】：

来自文档 --> STYLING CARD FIELDS
@vanburen - 这（不幸的是）是一个例子，但没有提供您可以在 configure() 调用中放置的内容的完整列表。

标签： twitter-bootstrap recurly

【解决方案1】：

Recurly 有几个可以设置样式的 css 类。我发现这比尝试使用他们的 js 样式要容易得多。

所以我使用 css 设置这些类的样式并忽略所有 js 选项。

.recurly-hosted-field        = Default styles for the div surrounding each field iframe.
.recurly-hosted-field-focus  = Applied when the user focuses on a field.
.recurly-hosted-field-number = Default styles for the div surrounding the month field iframe.
.recurly-hosted-field-month  = Default styles for the div surrounding the month field iframe.
.recurly-hosted-field-year   = Default styles for the div surrounding the year field iframe

文档：https://dev.recurly.com/docs/getting-started-1 他们在此链接底部有一个包含这些类的表格

【讨论】：