Question

我知道这是一件简单的事情，但我已经尝试过所有事情（包括谷歌搜索，甚至雇用另一个程序员一小时），似乎无法使这项工作。我正在使用的主题在wordpress搜索框提交按钮上有一个特定的颜色，我只需要更改颜色。

使用谷歌开发工具查看它，css看起来像这样：

.search-button, .submit_btn {
    background-color: #ffa025;
    background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
    background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: #f7b559 #e67e22 #e67e22 #e67e22;
    color: #fff;
    font-family: FontAwesome;
    float: left;
    height: 45px;
    width: 16%;
}

screenshot of style from google dev tools

我想做的只是用渐变关闭背景图像属性，背景颜色只是红色。我已经尝试使用上面的选择器，然后尝试了选择器：.search-button sBn，并将代码放入主题的附加CSS字段中。没有什么工作。谢谢你的帮助

Answer 1

如您所知，背景图像中设置的线性渐变覆盖了背景颜色样式。要重置background-image以允许使用background-color属性，请执行以下操作：

background-image: none;

然后，这会将背景颜色重置为主题css中设置的background-color（即＃ffa025）。

现在要更改颜色，您可以将background-color设置为您想要的任何颜色，例如

background-color: #ffa025;

您也可以使用background属性，但这可能会对您设置的其他规则产生连锁效应，因此我建议覆盖现有属性。

工作代码段

/* THEME CSS */
.search-button, .submit_btn {
    background-color: #ffa025;
    background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
    background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: #f7b559 #e67e22 #e67e22 #e67e22;
    color: #fff;
    font-family: FontAwesome;
    float: left;
    height: 45px;
    width: 16%;
}
/* YOUR CSS TO OVERRIDE THEME */
.search-button, .submit_btn {
    /* remove the gradient */
    background-image: none; 
    /* change the background colour to red */
    background-color: #ff0000;
}

<button type="submit" class="search-button">Search</button>

最后，不要忘记确保在主题CSS之后加载自定义CSS，或者它使用比主题CSS更具体的选择器，例如

.search-button.sBn {background-color: #ffa025;}

（ FYI，你要做的事情是非常微不足道的，所以我非常关心你雇佣的程序员 - 这应该花费他们不超过几分钟）

试图修改wordpress搜索提交按钮

1 个答案: