用第二个样式表覆盖 MailChimp 样式表

Question

目标：更改公司网站页面上 MailChimp 嵌入式注册表单上“订阅”按钮的背景颜色

问题：MailChimp 提供了 CSS 钩子“input.button”来设置订阅按钮的样式。如何使用此 CSS 覆盖已有的样式？

我要编辑的页面：http://www.sieralearn.com/subscribe/

下面是按钮在页面 HTML 中的写法：

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

据我所知，我无法访问 MailChimp 用来生成嵌入代码的样式表 (http://cdn-images.mailchimp.com/embedcode/classic-081711.css)。以下是样式在 MailChimp 样式表中的显示方式：

#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}

感谢您的所有帮助。

Answer 1

对不起，我太新了，不能简单地评论，但你不能简单地将他们的样式表 (http://cdn-images.mailchimp.com/embedcode/classic-081711.css) 的内容复制到你自己的新样式表中，并引用你的新样式表（代替旧的一）在您的订阅页面上？然后，您可以更改任何您想要的设计元素，而不会弄乱您喜欢的元素。

Answer 2

一年前我在blog 上实现了这个，我打算写一个教程，但我认为这个关于 SO 的答案会对人们有所帮助。我创建了一个fiddle，其中包含用于设置选择加入 Mailchimp 表单样式所需的 HTML 和 CSS。

input.button 可以完全按照您的意愿设置样式，这是更改整个按钮的一段代码，但您可以只更改背景颜色。如果您想查看详细的表单样式，请参阅随附的小提琴，因为它有更多细节。

input.button {
    -moz-box-shadow:inset 0 1px 0 0 #bbdaf7;
    -webkit-box-shadow:inset 0 1px 0 0 #bbdaf7;
    box-shadow:inset 0 1px 0 0 #bbdaf7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#fff;
    font-family:arial;
    font-size:16px;
    font-weight:700;
    padding:7px 32px;
    text-decoration:none;
    text-shadow:1px 1px 0 #528ecc;
}

可能希望用这段 CSS 更改 :hover。

input[class=button]:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5
}

HTML 标记。

<div class="bu1">
     <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
 </div>

最终结果。

另一个选项（未测试）是在您的自定义样式表或任何地方执行此操作：

#mc_embed_signup .button { background-color:lightcoral; }

使用 Chrome 开发者工具测试的效果如下图。