Mailchimp 嵌入 CSS

Question

我正在尝试在我的网站上嵌入一个 mailchimp 表单 - 只是一个用于输入电子邮件和订阅按钮的简单框。您可以在本页底部看到它：http://db1.15a.myftpupload.com/bennetts-tea/

这是 MC 表单的代码：

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" 
rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px 
Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet 
or in this style block.
   We recommend moving this block and the preceding CSS link to the 
HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://lovesometea.us13.list-manage.com/subscribe/post?
u=ac5a13ceef4b95430e423c8ea&amp;id=b50d604a2b" method="post" id="mc-
embedded-subscribe-form" name="mc-embedded-subscribe-form" 
class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
 <label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" 
id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none">
</div>
    <div class="response" id="mce-success-response" 
style="display:none"></div>
</div>    <!-- real people should not fill this in and expect good 
things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_ac5a13ceef4b95430e423c8ea_b50d604a2b" 
tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" 
name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

我正在尝试使用透明的注册背景和输入字段周围的绿色框。这是我一直在尝试的 CSS，可以在 Chrome 检查器工具中使用，但是当我应用于网站时没有任何变化。我错过了什么（很明显我是，哈）？

.div#mc_embed_signup {
background: transparent;
}

.label[for=mce-EMAIL] {
display: none;
}

#mce-EMAIL {
border: 3px solid #4EAAC1;
display: none;
}

#mc-embedded-subscribe-form {
background: transparent;
}

Answer 1

使用 CSS 时，您必须非常注意优先于其他内容的内容。具体规则优先于宽泛规则，后面的规则优先于前面的规则。

您有 2 个问题：

输入边框不是绿色，因为 #mc_embed_signup .mc-field-group input 优先于 #mce-EMAIL。要解决此问题，您需要使 CSS 规则更具体。将其更改为 #mc_embed_signup #mce-EMAIL

背景不透明，因为它被 HTML 代码段开头的规则覆盖。删除此行：#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }（或完全删除 <style> 块）

Mailchimp 嵌入 CSS

Mailchimp Embed CSS

css

wordpress

mailchimp