Mailchimp CSSを埋め込む

Question

私は自分のウェブサイトにメールチェンドフォームを埋め込もうとしています。電子メールを入力し、購読ボタンを押すだけの単純なボックスです。このページの一番下にそれを見ることができます：私はサインアップの透明な背景を持ってしようとしています

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

、そして周りの緑色のボックス：ここでhttp://db1.15a.myftpupload.com/bennetts-tea/

は、MCのフォームのコードです入力フィールド。これは私が試してきた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>を完全に削除してください）