响应式布局中表单提交按钮样式变回默认，如何保持全局蓝色样式？

出现这个问题的核心原因通常是：浏览器在响应式场景下会对表单控件应用默认样式，或者你的代码中存在媒体查询规则覆盖了按钮的自定义样式。以下是两种直接有效的解决方法：

1. 提高选择器优先级，精准定位提交按钮 #

将CSS选择器从.form-inline button改为更精准的.form-inline button[type="submit"]，提升样式优先级，避免被其他规则覆盖：

.form-inline button[type="submit"] {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
}
.form-inline button[type="submit"]:hover {
  background-color: royalblue;
}

2. 禁用浏览器默认表单控件样式 #

部分浏览器会在小屏幕下自动重置表单按钮样式，添加appearance属性彻底禁用默认样式，确保自定义样式全局生效：

.form-inline button[type="submit"] {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
  /* 禁用浏览器默认控件样式，兼容webkit内核 */
  appearance: none;
  -webkit-appearance: none;
}
.form-inline button[type="submit"]:hover {
  background-color: royalblue;
}

额外检查项 #

如果修改后仍有问题，排查页面中的媒体查询代码，确认是否存在针对.form-inline button或button[type="submit"]的样式覆盖，若有则调整优先级或删除冲突规则。

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