如何通过CSS自定义Bootstrap 5输入框组的圆角半径？-css教程-PHP中文网

直接改 .input-group 的 border-radius 不生效，因为 bootstrap 5 将圆角样式写死在 .input-group-text 和 .form-control 上且含 !important；需同时设置 .input-group{overflow:hidden} 及子元素的定向圆角。

如何通过css自定义bootstrap 5输入框组的圆角半径？

为什么直接改 `.input-group` 的 `border-radius` 不生效？

因为 Bootstrap 5 默认把圆角样式写死在 .input-group-text 和 .form-control 上，且用了 !important 覆盖。你给 .input-group 设 border-radius，它内部的子元素依然各自带独立圆角，视觉上会被“撑开”或错位。

真正要改的是这三类元素的组合逻辑：

.input-group-text（左侧/右侧附加文本）
.form-control（输入框主体）
.input-group 自身的 overflow 控制（防止圆角被裁切）

覆盖默认圆角的最小可行 CSS 规则

Bootstrap 5 使用 $input-border-radius 变量控制圆角，默认是 0.375rem。要统一改，最稳妥方式是重置这三处：

.input-group {
  overflow: hidden;
}
.input-group-text,
.form-control {
  border-radius: 0.5rem !important;
}
/* 左侧有附加文本时，只让左端圆角生效 */
.input-group .input-group-text:first-child,
.input-group .form-control:not(:first-child) {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}
/* 右侧有附加文本时，只让右端圆角生效 */
.input-group .input-group-text:last-child,
.input-group .form-control:not(:last-child) {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

注意：!important 在这里不是偷懒，而是绕过 Bootstrap 的内联样式优先级。若用 Sass 编译，推荐直接修改变量而非硬覆盖。

VPS Bootstrap

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

下载

使用 Sass 变量提前定制（推荐用于项目级统一）

如果你用的是 Bootstrap 5 的源码编译（如通过 bootstrap/scss），直接改变量更干净：

在自定义 SCSS 文件中，先定义 $input-border-radius: 0.5rem;
再 @import "bootstrap/scss/functions"; → @import "bootstrap/scss/variables"; → @import "bootstrap/scss/mixins"; → @import "bootstrap/scss/forms";
确保你的变量定义在 variables 导入之前，否则会被覆盖

这样所有表单组件（包括 .input-group 内部元素）都会自动继承新半径，无需额外 CSS。

常见失效场景和对应修复

以下情况容易以为“改了但没效果”，其实是因为其他规则干扰：

用了 .form-control-plaintext：它自带 border-radius: 0，需单独重置
配合 .is-invalid 或 .is-valid 状态：这些类会追加自己的 border-radius，得一并覆盖
响应式断点下圆角不一致：Bootstrap 的 $input-border-radius 是全局变量，不随屏幕尺寸变化；如需响应式，得用媒体查询手动覆盖
按钮型输入组（.input-group-btn 已废弃）：Bootstrap 5 改用 .btn 直接嵌套，此时按钮的 border-radius 需单独调，且要注意与 .form-control 的对齐