我的CSS中的背景颜色是什么？

Question

正如您在我的网站Trolleyy.com上看到的那样，我正在尝试从“转到商店”按钮复制主题按钮的电子邮件表单样式。问题是我尽可能多地尝试从检查它来复制css，它看起来仍然完全不同。我试图添加一个没有背景的重要规则，但这也删除了寄宿生。

有谁知道如何：

A）复制该按钮的整个css样式或

B）知道如何将按钮从灰色变为透明背景

很明显，我正在学习如何在CSS中设置样式，这对我有用！几个小时我一直在玩不同的想法。感谢。

Answer 1

看起来它们是两个非常不同的元素。一个是input type=submit，另一个是anchor。这意味着由于与特定元素关联的其他复杂规则，仅复制CSS类可能不起作用。

在检查您的网站后，您似乎需要为input#mc-embedded-subscribe.button定义一些规则或更新#optin input[type="submit"]中的规则。我只是玩了第一个，并能够将按钮变为红色。 CSS堆栈中的某些内容也会使用!important关闭边框，因此获取按钮边框的唯一方法是使用!important.

重新应用边框设置

我制定了这个规则，并获得了与“转到商店”按钮匹配的按钮：

input#mc-embedded-subscribe.button {
    background-color: transparent;
    border: 2px solid #fff !important;
}

CSS的复杂性使得提供更通用的解决方案变得困难，尽管可能确实存在。

一般建议避免过多使用!important修饰符，因为它可能使调试CSS变得非常困难。如果有太多重要的东西，那么它们都不是真的。

Answer 2

尝试将此代码添加到CSS中：

#mc-embedded-subscribe {
    background: transparent;
    border-width: 2px!important;
    border-style: solid!important;
}


#mc-embedded-subscribe:hover {
    background: #fff;
}

添加该代码后，您的表单应如下所示：

Answer 3

在＆＃34; SUBSCRIBE＆＃34;上尝试以下内容：按钮：

.button-clear {
    background-color: transparent;
    backface-visibility: hidden;
    border-color: rgb(255, 255, 255) !important;
    border-radius: 0px !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-image-outset: 0px !important;
    border-image-repeat: stretch !important;
    border-image-slice: 100% !important;
    border-image-source: none !important;
    border-image-width: 1 !important;
    color: rgb(255, 255, 255) !important;
}

.button-clear:hover {
    background-color: #ffffff !important;
    color: #333333 !important;
}

请注意：我强烈建议您尽量避免使用!important