Chrome/Firefox 中 ::-webkit-search-cancel-button 的定位原理是：该伪元素仅 WebKit/Blink 内核原生支持，Firefox 不识别；需用 padding-right 预留空间，appearance: none 重置后配合 position: relative 才能使绝对定位生效。
Chrome/Firefox 中 ::-webkit-search-cancel-button 的定位原理
这个伪元素只在 WebKit/Blink 内核（Chrome、Edge、Safari）里原生支持，Firefox 不识别，所以直接用 position: absolute 套它会失效——不是定位不准，是根本没这个东西。
实际渲染时，浏览器把清除按钮作为 input[type="search"] 的内部控件，位置由 UA 样式固定在右内边距区域；你不能靠 right: 0 硬塞，得先“腾出空间”再覆盖。
- 必须给
input设置padding-right（比如28px），留出按钮宽度余量 - 清除按钮默认尺寸约
14px × 14px，加上内边距和间隔，24–32px更稳妥 - 用
appearance: none重置后，再加position: relative才能让子级绝对定位生效
input[type="search"] 清除按钮的跨浏览器兼容写法
想让 Chrome 和 Firefox 都显示可点击的清除按钮，不能只靠伪元素。Firefox 需要自己画一个，而 Chrome 要隐藏原生按钮再复用逻辑。
核心思路：统一用 JS 控制显隐，CSS 只负责样式和定位，不依赖伪元素存在性。
立即学习“前端免费学习笔记（深入）”；
- 给
input包一层<div class="search-wrapper">，设为 <code>position: relative - 清除按钮用独立
<button type="button" class="search-clear"></button>，绝对定位在右内侧：right: 8px; top: 50%; transform: translateY(-50%) - 用
input.addEventListener('input', ...)控制按钮显隐，而不是监听focus/blur - Chrome 下加
input::-webkit-search-cancel-button { appearance: none; }防止双按钮 - 确保
input的box-sizing是border-box（现代 CSS 重置通常已设） - 避免用
em或rem设padding-right，改用px或ch（如padding-right: 2.5ch）更稳定 - 如果用了自定义字体，按钮图标可能下沉——加
vertical-align: middle到按钮本身，不是 input - 移动端 Safari 对
input[type="search"]的 UA 样式更激进，建议统一禁用原生样式：appearance: none; -webkit-appearance: none; - 清除按钮必须设
type="button"，且绑定 click 时加e.preventDefault() - 清空值后立刻调用
input.focus()，但要在setTimeout(..., 0)里执行，否则被浏览器同步 blur 干扰 - 不要用
input.value = ''后直接dispatchEvent(new Event('input'))，应改用input.dispatchEvent(new InputEvent('input'))兼容 Vue/React 的受控逻辑
padding-right 和 box-sizing 的联动陷阱
很多人设了 padding-right: 32px 还发现按钮被截断或错位，问题常出在盒模型和字体度量上。
清除按钮图标本质是字体图标或 SVG，其垂直居中依赖行高与字体大小匹配；一旦 box-sizing: border-box 和 font-size 不一致，上下留白就失准。
清除按钮点击后光标丢失的问题
点清除按钮后 input 失去焦点、光标消失，用户还得再点一次才能继续输入——这不是 bug，是事件冒泡 + 默认行为没拦住。
按钮默认是 type="submit" 或没设 type，触发表单提交或页面跳转；即使设了 type="button"，click 事件仍可能让 input 模糊。
right 值填多少，而是不同浏览器对「内边距归属」和「事件生命周期」的理解差异。尤其当搜索框嵌在弹窗、折叠面板或 RTL 布局里时，transform: translateX() 比 right 更可靠，但得记得重置 direction。
