极简HTML带有清除按钮的输入框代码-html教程-PHP中文网

原生 html+css 实现清除按钮的输入框必须使用 type="search"，因仅此类型浏览器内置清空逻辑；chrome/edge/safari 自动显示 × 按钮，firefox 需通过 ::-webkit-search-cancel-button 启用，但无纯 css 全兼容方案。

极简html带有清除按钮的输入框代码

如何用原生 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 = "" 清空。但那就不是“极简”了。