如何将表单中提交按钮的背景色从蓝色改为橙色？

核心原因 #

你遇到的问题是因为谷歌提供的add-ons1.css中，.button类的样式优先级很高（可能包含!important或者使用了更具体的选择器），导致常规的内联样式或简单选择器无法覆盖它。

解决方案 #

方法1：使用高优先级CSS选择器（推荐）

在你的自定义CSS中，使用比原CSS更具体的选择器，同时覆盖按钮的所有交互状态（默认、悬停、点击、聚焦）：

/* 针对你的表单内的按钮，提升选择器特异性 */
#myform .button,
#myform .button:hover,
#myform .button:active,
#myform .button:focus {
  background-color: orange;
  /* 若需要同步修改边框色，添加以下行 */
  border-color: orange;
  /* 如果原CSS用了!important，这里也需要加上 */
  /* background-color: orange !important; */
}

将这段代码放在页面<style>标签中，确保它加载在谷歌的CSS之后。

方法2：强制内联样式

如果不想写额外CSS，可以直接给按钮的内联样式加上!important来强制覆盖：

<button type="submit" class="button" style="background-color: orange !important;">Submit</button>

为什么之前的尝试无效？ #

• 内联样式未加!important时，被原CSS中带有更高优先级的.button样式覆盖；
• 元素调试时可能只修改了默认状态，没覆盖悬停/点击等交互状态，导致看起来没生效；
• 复制原CSS到自己网站后，若没有调整选择器优先级或覆盖所有状态，依然会沿用原样式。

内容的提问来源于stack exchange，提问作者runguy2911