如何更改 CSS 中按钮的背景颜色？

Posted 2023-03-24

【中文标题】如何更改 CSS 中按钮的背景颜色？

【英文标题】：How to change the background color of a button in CSS?

【发布时间】：2021-12-14 00:24:44

【问题描述】：

所以我尝试在 Wordpress 上添加一些额外的 CSS 并覆盖此表单按钮的颜色，但没有任何反应。我在这里输入了正确的代码吗？

当我检查这个按钮时...

<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-1527" method="post" data-id="1527" data-name="Get Started"><div class="mc4wp-form-fields"><div class="input-group">
  <div class="input-icon"><i class="far fa-paper-plane"></i></div>
    <input type="email" placeholder="Your email address" class="form-control" name="email" data-error="e-mail field is required" required="">
  <button type="submit" value="Subscribe" class="item-btn">Subscribe</button>
</div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1635448917"><input type="hidden" name="_mc4wp_form_id" value="1527"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1"><div class="mc4wp-response"></div></form>

我之所以尝试button.item-btn::before 是因为它在检查器中显示了这一点

【问题讨论】：

您是要更改“订阅”一词的颜色还是更改按钮的背景颜色？ ::before 和 :after 的样式是什么？

【参考方案1】：

尝试将 CSS 样式添加为内联按钮元素。

内联样式将覆盖来自外部 css 文件的样式。

您还可以尝试在表单元素中使用 id 选择器 id=mc4wp-form-1 来增加 css 样式的特异性以帮助覆盖默认值。

【讨论】：

我可以在 Wordpress 网站的附加 CSS 部分中执行此操作吗？

【参考方案2】：

您的选择器减去伪元素应该可以完成这项工作。 也许您的样式表中的按钮有另一个背景颜色定义，具有更高的特异性。 您可以尝试像这样提高选择器的特异性：

#mc4wp-form-1 button.item-btn 
  background-color: mycolor;

【讨论】：

这只是将文本更改为指定的任何颜色 :( 不是按钮的蓝色背景