如何将搜索输入框的原生取消(X)图标替换为自定义图标库中的图标

要实现这个需求，核心是先隐藏浏览器原生的搜索取消按钮，再通过CSS伪元素调用自定义图标库的图标，具体实现如下：

步骤1：隐藏原生取消按钮 #

通过-webkit-appearance: none（适配Chrome、Safari等webkit内核浏览器）或-moz-appearance: none（适配Firefox）移除原生按钮的默认样式，彻底隐藏原生图标。

步骤2：调用自定义图标库的图标 #

根据@custom-icons库的语法，在伪元素的content属性中指定目标图标。同时设置图标的尺寸、颜色等样式，匹配你的输入框风格。

完整CSS示例 #

/* Chrome、Safari等webkit内核浏览器 */
#input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  /* 替换为@custom-icons库中取消图标的调用语法，比如图标标识符或CSS变量 */
  content: '@custom-icons/cancel';
  /* 调整图标尺寸，适配输入框高度 */
  width: 16px;
  height: 16px;
  /* 设置图标颜色，匹配你的主题 */
  color: #666;
  cursor: pointer;
  /* 可选：调整边距，避免和输入内容重叠 */
  margin-right: 8px;
}

/* Firefox浏览器兼容 */
#input::-moz-search-cancel-button {
  -moz-appearance: none;
  content: '@custom-icons/cancel';
  width: 16px;
  height: 16px;
  color: #666;
  cursor: pointer;
}

/* IE/Edge浏览器兼容（可选） */
#input::-ms-clear {
  display: none;
  /* 若要替换，可参考上面的方式设置content和样式 */
}

关键注意事项 #

• 匹配图标库语法：不同自定义图标库的调用方式不同，有的用CSS变量（如var(--icon-search-cancel)），有的直接用图标名称作为content值，务必对照@custom-icons的文档调整content属性。
• 跨浏览器适配：不同浏览器的搜索取消按钮伪元素选择器不同，按需添加对应前缀的样式规则。
• 视觉协调：根据输入框的大小、主题色调整图标的宽高、颜色和边距，保证和整体UI风格统一。
• 交互一致性：保留cursor: pointer，确保点击体验和原生按钮一致。

内容的提问来源于stack exchange，提问作者Takoua