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，您必须非常小心什么优先于其他东西。具体规则会覆盖广泛的规则，后来的规则会覆盖之前的规则。

你有两个问题：

输入边框不是绿色，因为#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

1 个答案: