bootstrap 5搜索框圆角失效主因是.input-group子元素样式覆盖及safari私有样式干预，需同步修改.first-child/.last-child规则或重置-webkit-appearance。
Bootstrap 5 搜索框怎么加圆角？直接改 border-radius 不生效
因为 Bootstrap 5 默认给 .form-control（包括 input[type="search"]）设了 border-radius: 0.375rem，但如果你用的是 .input-group 包裹的搜索框（比如带按钮或图标的），圆角会被 .input-group-text 或父容器的 overflow: hidden 截断，或者被 .input-group > *:first-child 的样式覆盖。
实操建议：
- 优先用 Bootstrap 自带的
rounded-pill类：给input加上它，同时确保父级.input-group没有强制裁剪（比如去掉自定义overflow） - 如果要自定义弧度，别只改
input，得同步覆盖.input-group > *:first-child和.input-group > *:last-child的border-radius - 检查是否启用了 RTL 模式（
dir="rtl"），此时:first-child/:last-child逻辑会反转，圆角可能加错边
为什么加了 border-radius 还是直角？常见 CSS 冲突点
最常踩的坑是权重不够。Bootstrap 的 .input-group > *:first-child 规则带两个类选择器，而你写的 input { border-radius: 12px } 只有一个标签选择器，直接被覆盖。
实操建议：
- 用浏览器开发者工具选中元素，看 computed 样式里
border-radius被哪条规则 override —— 很大概率是.input-group > .form-control或.input-group > *:first-child - 提升选择器权重：写成
.input-group > .form-control.rounded-search，再加!important（仅调试用，上线前应避免） - 更稳妥的方式：用
:has()（需注意兼容性）或直接在.input-group上加自定义类，统一控制子元素圆角
Bootstrap 4 和 5 的 border-radius 行为差异
Bootstrap 4 中 .input-group 默认不设圆角，所有圆角靠 .form-control 自身；Bootstrap 5 改了策略，把圆角逻辑拆到父容器和子元素上，更灵活但也更容易漏掉某一边。
实操建议：
- 升级到 v5 后，如果沿用 v4 的自定义样式，必须补全对
.input-group > *:first-child和.input-group > *:last-child的重写 - v5.3+ 开始支持 CSS 变量，可直接覆盖
--bs-border-radius，但仅影响未显式设border-radius的组件 - 用 Sass 编译时，改
$input-border-radius变量比全局覆盖 CSS 更干净
移动端 Safari 下圆角突然消失？
不是 CSS 问题，是 Safari 对 input[type="search"] 的私有样式干预：它会给搜索框自动加 -webkit-appearance: searchfield，这个值会重置所有 border-radius 和 border。
实操建议：
- 强制重置外观：
input[type="search"] { -webkit-appearance: none; } - 但注意：这会让 Safari 失去原生搜索图标和清空按钮，需要手动用
::-webkit-search-cancel-button补上 - 更省事的做法：不用
type="search"，改用type="text"+role="search"，语义和样式都可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
