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

Question

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

问题：MailChimp提供CSS钩子＆＃34; input.button＆＃34;设置“订阅”按钮的样式。如何使用此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开发者工具测试的效果如下所示。