原生 HTML+CSS 实现清除按钮的输入框必须使用 type="search"，因仅此类型浏览器内置清空逻辑；Chrome/Edge/Safari 自动显示 × 按钮，Firefox 需通过 ::-webkit-search-cancel-button 启用，但无纯 CSS 全兼容方案。
如何用原生 HTML + CSS 实现带清除按钮的输入框
不需要 JavaScript 就能做出点击清空的输入框，但必须用 type="search" —— 这是唯一原生支持 clear 按钮的 input 类型。其他类型（如 text）即使加了 appearance: none 也无法触发浏览器内置清空逻辑。
-
type="search"在 Chrome、Edge、Safari 中自动显示 × 按钮；Firefox 默认不显示，需手动启用：input[type="search"]::-webkit-search-cancel-button { appearance: auto; } - 清除按钮只在输入框有内容且获得焦点时出现，这是浏览器默认行为，无法用 JS 模拟该状态
- 若必须用
type="text"，就得自己画按钮 + 绑定click和input事件，此时清除逻辑完全由 JS 控制，和原生行为无关
极简可运行代码（纯 HTML/CSS，无 JS）
下面这段可以直接复制粘贴进 .html 文件打开运行：
<input type="search" placeholder="输入后点 × 清空" style=" padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; ">
注意：Safari 和旧版 Chrome 可能默认给 search 输入框加圆角或阴影，用 appearance: none 重置样式时，会连带隐藏清除按钮（尤其在 Safari 上）。所以不要对 type="search" 轻易加 appearance: none。
Firefox 下清除按钮不显示？这样修
Firefox 不支持 ::-webkit-search-cancel-button，但可以用 input[type="search"] 的伪元素兼容处理：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
input[type="search"] {
/* 确保 Firefox 也尝试渲染取消按钮（部分版本有效） */
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
/* Firefox 115+ 支持 ::marker 但不适用于 search，目前无纯 CSS 方案，只能接受它不显示或换 JS 方案 */实际项目中，如果必须全浏览器一致，就放弃原生方案，改用 type="text" + 手动添加按钮 + value = "" 清空。但那就不是“极简”了。
为什么不用 type="text" + autocomplete="off" 模拟？
很多人误以为加 autocomplete="off" 或 autocapitalize="none" 就能“增强”清空体验，其实它们和清除按钮完全无关。真正影响清除行为的只有三件事：
- 是否为
type="search" - 是否有用户输入（
value.length > 0） - 是否处于聚焦态（
:focus）
其他属性比如 required、readonly、disabled 都会让清除按钮消失或失效。特别是 readonly —— 它会让输入框不可编辑，同时禁用清除按钮，哪怕里面有值也不会显示 ×。
