用绝对定位实现：外层容器设position: relative，按钮设position: absolute; right: 0; top: 50%; transform: translateY(-50%)垂直居中，input加足够padding-right防遮挡，兼容IE11且规避flex渲染异常。
怎么用 CSS 实现 input 右侧固定宽度按钮（不靠 JS）
纯 CSS 就能搞定，关键是把 input 和按钮包进一个相对定位容器，再让按钮绝对定位到右边界。不需要监听输入、不用计算宽度、不依赖 flex 动态伸缩——那些方案在 IE11 或表单重置时容易错位。
- 父容器设
position: relative，display: inline-block或block（避免脱离文档流后宽度塌陷） - 按钮设
position: absolute; right: 0; top: 50%; transform: translateY(-50%)，垂直居中更稳，比line-height或padding兼容性好 -
input本身加padding-right，值 ≥ 按钮宽度 + 内边距，防止文字被遮挡 - 按钮高度建议和
input一致，比如都设height: 36px，否则在 Chrome 表单自动填充时可能触发高度抖动
为什么用 flex 布局做后缀按钮会出问题
看着简洁，但实际线上常翻车：Safari 15.4 以下对 flex + input[type="search"] 渲染异常；Chrome 在 autocomplete="off" 失效后，自动填充的黄色背景会撑开按钮区域；还有更隐蔽的——当父容器用 width: fit-content 时，flex 会让按钮“吸住”输入框右边缘，但用户缩放页面到 125% 时，按钮突然跳到下一行。
- 别用
display: flex直接包裹input和按钮，除非你明确控制了所有子项的flex-shrink和min-width - 如果非要用
flex，把按钮包一层div并设flex: 0 0 auto，input设flex: 1 1 0，再加min-width: 0防止溢出 - 移动端键盘弹起时，iOS Safari 会重算
flex容器高度，导致按钮上移——这时候绝对定位反而更稳
type="search" 自带的清除按钮和自定义后缀冲突怎么办
Chrome 和 Safari 对 input[type="search"] 默认渲染 × 清除按钮，它会挤占右侧内边距空间，导致你的自定义按钮偏左或重叠。不是样式覆盖就能解决，得从伪元素和逻辑层双管齐下。
- 先清掉默认 ×：用
input[type="search"]::-webkit-search-cancel-button { appearance: none; }（WebKit）和input[type="search"]::-ms-clear { display: none; }（IE/Edge） - 再补回交互逻辑：监听
input的input事件，当value非空且聚焦时显示你的按钮；清空时隐藏，同时手动调用input.select()避免光标残留 - 注意：不要用
focusout判断是否清空，用户点击按钮时也会触发，造成误判
按钮点击后如何精准聚焦到 input（尤其在 Vue/React 中）
原生 click 事件里直接 input.focus() 够用，但在框架里容易失效——React 的合成事件、Vue 的异步 DOM 更新，都可能导致 focus() 被吞掉或时机不对。
- React：用
useRef拿到input元素，在按钮onClick回调里加setTimeout(() => ref.current?.focus(), 0)，绕过合成事件队列 - Vue 3：用
nextTick包裹inputRef.value?.focus()，确保 DOM 已更新 - 通用兜底：给
input加tabindex="0"，按钮点击时先input.click()再focus()，兼容旧版 Firefox 对只读input的 focus 限制
真实项目里最常被忽略的是按钮的可访问性：没加 aria-label，键盘 Tab 无法进入，屏幕阅读器读不出功能。哪怕只是「搜索」按钮，也得写 aria-label="搜索"，否则 WCAG 2.1 AA 就不达标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
