HTML代码中input类型为search时的清除按钮隐藏方案-html教程-PHP中文网

最稳妥方式是使用::-webkit-search-cancel-button伪元素设置appearance: none或display: none；该伪元素仅在webkit/blink内核生效，firefox不渲染原生清除按钮，故无需处理；隐藏仅作用于视觉层，如需禁用清空功能须配合js逻辑控制。

html代码中input类型为search时的清除按钮隐藏方案

Chrome / Edge 中 `input[type="search"]` 的 × 清除按钮怎么去掉？

直接用 ::-webkit-search-cancel-button 伪元素隐藏，这是最稳妥、兼容性最好的方式。它只在 WebKit/Blink 内核（Chrome、Edge、Safari）中生效，不影响其他浏览器的默认行为。

常见错误是试图用 appearance: none 或 display: none 直接作用于 input 元素本身——这完全无效，因为清除按钮是伪元素，不是子节点。

input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  /* 或者 */
  /* display: none; */
}

appearance: none 更推荐：保留伪元素结构，避免某些旧版 Chrome 下样式异常
必须加 !important 的情况极少，一般不需要；但如果项目里有重置库（如 Normalize.css）覆盖了该伪元素，才考虑加
Safari 15.4+ 对 appearance: none 支持稳定，此前版本建议用 display: none

Firefox 不显示清除按钮，为什么加了样式反而出问题？

Firefox 从不渲染 input[type="search"] 的原生清除按钮，所以 ::-webkit-search-cancel-button 在它身上根本不会匹配。如果你在 Firefox 里看到“清除按钮”，那一定是 JS 自己实现的，或者用了第三方组件（比如某些 UI 库的封装 input）。

这时候强行给 ::-webkit-search-cancel-button 加样式，对 Firefox 没影响，但可能干扰其他浏览器的预期行为，属于冗余代码。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

检查实际运行环境：用 DevTools 切换浏览器，确认按钮是否真由浏览器原生渲染
如果用的是 Ant Design、Element Plus 等框架，它们的 Search 组件通常自带清除逻辑，应通过组件 props 控制（如 showClear），而非 CSS
不要为了“统一写法”而在所有浏览器里都写一遍伪元素样式

想彻底禁用清除功能，光隐藏 CSS 还不够

隐藏按钮只是视觉层，用户仍可通过快捷键（Ctrl + A → Delete）或 JS 调用 input.value = '' 清空内容。若业务要求“不可清空”，得配合逻辑控制。

监听 input 事件 + 检查 event.inputType === 'deleteContentBackward' 可拦截部分删除行为，但不覆盖全场景（比如粘贴后手动删）
更可靠的做法是：绑定 keydown，拦截 Backspace 和 Delete 键，但要注意光标位置（全选时才允许删除）
如果只是表单校验阶段不允许为空，应在提交前校验，而不是阻止用户操作——体验更自然