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