如何将CSS添加到我的`Mailchimp`弹出窗口表单？

Question

我正在使用Mailchimp的弹出式订阅表单。我已经尽可能地在Mailchimp中样式化了内容。我想在弹出式中添加一些CSS，我已经尝试将CSS添加到我的站点中已经加载的CSS表中，但即使加上!important等标记，表单仍无法在弹出式中使用。

来自Mailchimp的代码如下：

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us8.list-manage.com","uuid":"731f7bb19522a201007a53699","lid":"138afe0d12"}) })</script>

现在，我也尝试在我的页面中添加内联样式作为测试，例如：

<style>
    #mc-EMAIL {
        border:6px solid pink !important;
    }
</style>

我注意到我的mailchimp样式来自这里，然而mailchimp说我无权更改此CSS文件。

我的总体问题是，我该如何向我的mailchimp弹出表单添加CSS？

- Ryan Collingwood

---

你尝试过将CSS内联添加到代码中吗（如果你有能力的话）？例如：<div id="mc-EMAIL" style="border:6px solid pink;">...</div> - crazymatt

我无法像你的示例那样访问HTML，因为它是由JS脚本生成的。我也尝试过在我的网站HTML中使用<style>...</style>，但没有起作用。谢谢。 - Ryan Collingwood

你看过这篇文章吗？http://kb.mailchimp.com/lists/signup-forms/advanced-form-customization - crazymatt

你好，我已经看到了这个问题，我们已经被归类为“高级会员”，这篇文章更多地是指用户在注册邮件列表后会收到的响应电子邮件定制，以及显然的邮件模板。我已经与Mailchimp的在线支持团队就我的问题进行了交流，他们明确表示我不能使用自己的CSS样式来设计弹出窗口，我之前曾经为标准的Mailchimp表单（非弹出式js生成）进行过样式设计，没有遇到任何问题。感谢您的关注。 - Ryan Collingwood

明白了。很遗憾他们不允许自定义弹出窗口。祝你的项目好运。 - crazymatt

Answer 1

Mailchimp弹出窗口是否使用了<iframe>标记？ 如果是的话，我认为你不能直接使用CSS自定义它。

1.通过js向iframe注入CSS样式。 如何将CSS应用于iFrame 2.改用Mailchimp API与您的自定义弹出窗口html/css集成。 这可能需要很多努力，但易于维护。（可以问我） Mailchimp API文档 MailChimp API 3.0和WordPress HTTP API 祝好运。

- Akegvd

---

这是答案。 - Clayton Engle

Answer 2

CSS无法针对来自不同域的iframe中的元素进行定位。 但是您可以使用JS，但这不是CSS的答案:)

- AlexHighHigh

Answer 3

因为它是一个 iframe，所以你无法更改 CSS 样式。但你可以使用 JS 来实现。就像你在 这里 看到的那样。

- KasperOfzeau