Mailchimp Embed 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>块）