Bootstrap 5如何全局修改表单默认样式-Bootstrap教程-PHP中文网

直接修改 --bs-border-color 变量最省事，可统一更新表单控件、卡片、分割线等边框色；但需额外处理:focus状态、深色模式及.form-check-input选中态，并注意sass重定义变量更彻底但需构建支持。

bootstrap 5如何全局修改表单默认样式

直接改 `--bs-border-color` 变量最省事

Bootstrap 5.3+ 所有带边框的表单控件（.form-control、.form-select、.form-check-input）默认都继承 --bs-border-color，值为 #dee2e6。改它，所有控件边框颜色自动同步，不用逐个类覆盖。

在你的自定义 CSS 文件末尾（确保加载顺序在 Bootstrap 之后）写：

:root {
  --bs-border-color: #495057;
}

注意两点：

--bs-border-color 不只影响表单，还控制 .card 边框、.dropdown-divider、.hr 等——改之前确认这是你想要的全局效果
如果项目启用了深色模式（data-bs-theme="dark"），必须额外加：

[data-bs-theme="dark"] {
  --bs-border-color: #343a40;
}

`.form-control:focus` 的聚焦样式必须单独处理

只改默认态边框色远远不够。:focus 状态有自己的 border-color 和 box-shadow，且优先级高于普通规则。不覆盖，点击后边框立刻变回默认蓝灰。

推荐写法（加 !important 避免被 Bootstrap 原生规则覆盖）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.form-control:focus {
  border-color: #495057 !important;
  box-shadow: 0 0 0 0.25rem rgba(73, 80, 87, 0.25) !important;
  outline: 0;
}

outline: 0 是必须的，否则原生 outline 会和新 box-shadow 叠加出双线
box-shadow 的 alpha 值建议 ≥ 0.15，否则深色背景上不可见
禁用 box-shadow 但没补其他聚焦反馈，等于彻底移除键盘焦点指示，违反可访问性

`.form-select` 和 `.form-check-input` 不能靠变量一并生效

--bs-border-color 对 .form-select 有效，但对 .form-check-input（checkbox/radio）无效——它的选中态颜色硬编码在 .form-check-input:checked 的 background-color 里。

必须显式覆盖：

.form-check-input:checked {
  background-color: #495057 !important;
  border-color: #495057 !important;
}

不加 !important 极大概率失效，因为 Bootstrap 的原始规则含 :checked 伪类，优先级高
只改 background-color 不改 border-color，会出现“红底蓝边”或“灰底黑边”的错位感
.form-select 虽然受 --bs-border-color 影响，但它的下拉箭头、圆角、聚焦阴影仍需手动加 appearance: none 和伪元素重绘，否则改了也白改

用 Sass 重定义变量才是真·全局修改

如果你用 Sass 编译 Bootstrap（比如通过 dart-sass 或 Webpack），最干净的方式是在引入前重定义变量。这能确保按钮悬停、表单聚焦、徽章边框、警告框等所有派生状态颜色一致。

新建 _custom.scss，按顺序写：

$primary: #495057;
$primary-rgb: 73, 80, 87;
$primary-text-emphasis: #212529;
$primary-border-subtle: #adb5bd;

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/forms"; // 只需导入 forms 模块即可覆盖表单相关变量
@import "bootstrap/scss/components";