如何利用HTML制作搜索框展开动效_通过CSS width过渡与focus-html教程-PHP中文网

:focus触发width动画常失效，因auto/100%不可插值；须用确定尺寸、transition写在默认态、配合overflow:hidden和box-sizing:border-box，并注意移动端需js补位及避免布局重排。

如何利用html制作搜索框展开动效_通过css width过渡与focus

单纯用 :focus 触发 width 动画，90% 的情况下会失效——不是写法错，而是浏览器根本没法插值。

为什么 `:focus` + `width` 常常没动画

浏览器对 width 做过渡，要求起始值和结束值都必须是可计算、可插值的确定尺寸。但很多开发者直接写：

input { width: auto; transition: width 0.3s; }
input:focus { width: 240px; }

问题就出在 auto：它不是数值，浏览器跳过过渡直接渲染。即使你用 100% 开头，父容器宽度一变，起始值就浮动，插值失败。

起始 width 必须是明确单位：比如 48px、3rem，不能是 auto 或 100%
transition 必须写在默认状态（非 :focus），否则首次聚焦不触发
别在 flex 容器里混用 width 和 flex，容易被 min-width 或 flex-shrink 截断动画

怎么写才真正能动：初始宽度 + `overflow: hidden`

收起态不是“消失”，而是“只露图标”。关键不是压窄，而是控制可见范围：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

给 input 设初始 width: 48px（刚好容下搜索图标 + 一点 padding）
加 overflow: hidden，确保文字和光标不溢出
聚焦时设 width: 220px，同时调小 padding-left 让文字左移，视觉更连贯
务必写 box-sizing: border-box，否则边框和内边距会额外撑宽

示例 CSS：

input.search-input {
  width: 48px;
  padding: 8px 12px 8px 36px;
  overflow: hidden;
  box-sizing: border-box;
  transition: width 0.25s ease, padding-left 0.25s ease;
}
input.search-input:focus {
  width: 220px;
  padding-left: 12px;
}

移动端 `:focus` 失效？得靠 JS 补位

iOS Safari 在软键盘弹出后常不触发 :focus，Android Chrome 对快速失焦响应滞后。纯 CSS 方案在这里不可靠。

HTML 中给 input 加 class search-input，外层包个 div.search-wrapper
JS 监听 focus 和 blur，切换 is-expanded 类：element.classList.add('is-expanded')
blur 时不立即收起，加 setTimeout(() => ..., 150)，避免点清空按钮时误收
CSS 写 .search-wrapper.is-expanded .search-input 覆盖展开样式，比伪类更可控