Question

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

我可以设置包含DIV的样式以使border和border-radius与Bootstrap字段匹配，但Bootstrap在输入字段上设置填充：

padding: 6px 12px;

...我相信您通过recurly configure为实际输入字段传递样式，所以我尝试了这个：

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 / injection输入字段上填充？

Answer 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 他们在此链接的底部有一个表格，其中包含这些类

格式化Recurly.js输入字段

1 个答案: