bootstrap 5 不提供清除按钮的 css 实现，因其 .form-control 未定义相关样式或 dom 结构；原生 type="search" 的 × 按钮不可控且跨浏览器不一致；可靠方案是使用 position: relative 容器包裹 input 和独立 button，手动处理显隐、事件派发与可访问性。
Bootstrap 5 根本没提供清除按钮的 CSS 实现
因为 Bootstrap 5 的 .form-control 类里压根没有定义任何与清除按钮相关的样式或 DOM 结构。它不生成 × 图标，也不插入额外元素，更不会监听 input 值变化来控制显隐——这些全得你手动补全。所谓“用 CSS 重置清除按钮”，前提得先有按钮；而原生 Bootstrap 5 连按钮都不造，自然无从重置。
type="search" 浏览器自带的 × 不受 CSS 控制
有人试过给 <input type="search"> 加 appearance: none 或覆盖 ::-webkit-search-cancel-button，但这条路走不通：
-
::-webkit-search-cancel-button是 WebKit 专属伪元素，Firefox 和 Safari（非 WebKit 版）完全不认 - 即使在 Chrome 中，该伪元素无法通过 JS 触发
input或change事件，Vue/React 表单会立即失步 - 它的点击行为不可拦截，无法阻止默认清空后自动 focus input —— 但你也无法在清空前做校验或埋点
- 一旦加了
appearance: none，整个取消按钮就彻底消失，且无法用普通 CSS 恢复
试图用 input-group + input-group-text 模拟会破坏语义和交互
常见错误是把 <span class="input-group-text">×</span> 塞进 .input-group，然后靠 JS 绑定 click 清空。问题在于：
-
.input-group-text默认没有tabindex，键盘用户无法聚焦到 × 按钮，违反可访问性 - 点击后
input.value = ''不派发事件，v-model或useState不更新，必须手动dispatchEvent -
.input-group的z-index和padding会干扰下拉建议、日期选择器等绝对定位组件，尤其在.navbar内 - 移动端点击 × 按钮时，若未设
type="button"，可能意外触发表单提交或页面跳转
真正可控的方案只有「容器 + 绝对定位按钮 + 手动事件」
必须用一个 position: relative 的包裹容器（如 <div class="input-with-clear">），里面放 <code><input> 和独立的 <button type="button"></button>：
- 按钮用
position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%)对齐，z-index: 100防遮挡 - 显隐逻辑不能只靠
input事件：还要监听focus（聚焦时显示）、blur（延时 100ms 隐藏，防点击按钮瞬间触发）、paste（粘贴后需 setTimeout 取值） - 点击清空后，必须执行两件事：
input.value = ''+input.dispatchEvent(new Event('input', { bubbles: true }))+input.dispatchEvent(new Event('change', { bubbles: true })) - 别忘了给按钮加
aria-label="清除"和title，否则屏幕阅读器无法识别功能
最常被忽略的是事件派发时机和焦点管理：清空后不主动 input.focus()，用户就得再点一次输入框；漏掉 bubbles: true，父级表单验证逻辑可能收不到事件。
