必须用结构化DOM+JS方案替代伪元素：HTML中添加独立清除按钮，CSS用Flex布局对齐，JS控制显隐并修复iOS焦点丢失和点击热区不足问题。
移动端输入框清除按钮在 Safari、Chrome、Firefox 甚至 IE/Edge 中默认样式和触发逻辑完全不同，直接写 ::-webkit-search-cancel-button 或 ::-ms-clear 会漏掉至少一个主流环境——必须分层处理，不能只靠单一伪类。
为什么 ::-webkit-search-cancel-button 在 Safari 和 Chrome 表现不一致
Chrome 120+ 对 type="search" 的清除按钮支持更激进：点击后自动触发 search 事件，且按钮尺寸随 font-size 缩放；Safari（尤其是 iOS 17+）则保留原生圆角、固定尺寸（约 14×14px），且不响应 search 事件——只靠 CSS 伪类无法统一行为。
- 不要依赖
appearance: none后直接改背景图：Safari 下该伪元素可能根本未渲染，display为none - 避免用
width/height强制设为16px：iOS Safari 会忽略，仍按内部计算值渲染 - 必须配合
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }，否则 Safari 保留原生交互逻辑
::-ms-clear 在 Edge/IE11 中的兼容性陷阱
IE11 和旧版 Edge（EdgeHTML）对 input[type="text"] 也会渲染清除按钮，但仅通过 ::-ms-clear 暴露，且不支持 type="search"。它默认显示在右侧，但位置不受 padding-right 影响，容易与自定义图标重叠。
- 必须显式写
input::-ms-clear { display: block; width: 14px; height: 14px; }，否则某些版本下默认display: none - 不能用
background-image替换图标：IE11 不支持 data URL SVG，需用 base64 PNG 或外链 - 若项目已弃用 IE11，可省略此条，但
:-ms-input-placeholder仍需保留（部分企业内网仍跑 IE 模式）
真正跨浏览器生效的清除按钮控制方案
放弃“只修伪元素”的思路，把清除逻辑收归 JavaScript + Flexbox 布局。伪元素只做兜底，主控权交给结构化 DOM。
立即学习“前端免费学习笔记（深入）”；
- HTML 中统一用
<div class="search-wrapper"><input type="search"><button type="button" id="clear-btn"></button></div>，不依赖浏览器自动插入 - CSS 中移除所有
position: absolute定位，改用.search-wrapper { display: flex; align-items: center; }让按钮天然垂直居中 - JS 控制显隐：
input.addEventListener('input', () => { clearBtn.style.display = input.value ? 'flex' : 'none'; });，比监听:placeholder-shown更可靠 - 点击清空后，必须手动调用
input.focus()，否则 iOS 键盘不会自动收起
清除按钮点击后光标/焦点丢失问题
移动端点击清除按钮（尤其是伪元素按钮）后，input 常失去焦点，键盘不收，用户需再点一次才能继续输入——这不是样式问题，是事件冒泡和 focus 状态管理缺失。
- 给清除按钮加
event.preventDefault()和event.stopPropagation()，防止触发父级表单 submit - 清空值后立即执行
input.focus()，并在setTimeout中延时 0ms 执行（绕过 iOS Safari 的 focus 延迟 bug） - 如果使用
type="reset"按钮，务必加formnovalidate属性，否则触发表单校验阻塞焦点恢复
最易被忽略的是：清除按钮的点击区域在 iOS 上必须 ≥44×44px 才符合可访问性规范，但伪元素本身无法设置 min-width/min-height。所以最终方案里，那个 #clear-btn 必须是真实 DOM 元素，且包裹一层 padding 或用 ::before 伪元素撑开点击热区——样式可以藏，交互热区不能省。
