如何将 CSS 添加到我的“mailchimp”弹出表单？

Question

I am using mailchimps popup subscribe form. I have styled the content in mailchimp as far as I can. I want to add some more CSS to the popup, I have tried adding CSS to the CSS sheet already loading in my site yet the form will not pick it up in the popup even with !important etc.

The code from mailchimp is:

<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>

Now, I have tried also adding inline styling in my page for a test, example:

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

I have noticed my styles for the mailchimp are coming from this however mailchimp say I do not have access to change this CSS file.

My overall question which I am sure someone else must have faced before me:

How do I add CSS to my mailchimp popup form?

Answer 1

Is it Mailchimp popup came out with <iframe> tag? If yes I think you can't custom it directly with css.

1. Inject your css to iframe by js.

How to Apply CSS to iFrame

2. Change to use mailchimp API integrate with your custom popup html/css. It might get a lot of effort but easy to maintenance. (can ask me)

Mailchimp API DOC

MailChimp API 3.0 and WordPress HTTP API

GOOD LUCK.

Answer 2

CSS cannot target elements within an iframe from a different domain. You can however use JS, but thats not a CSS answer :)

Answer 3

Because it's a iframe you can't change the css. But you can do that with JS. As you can see here .