如何修改type为search的input输入框自带搜索图标的颜色

你提到的搜索图标为浏览器针对search类型输入框内置的默认样式，对应background-image属性，不同浏览器的控制规则存在差异，以下是两种可行方案：

方案1：webkit内核浏览器直接修改/替换（适配Chrome、Edge、Safari） #

• 方法1：通过filter属性直接调整默认图标颜色
  代码示例：

  input[type="search"]::-webkit-search-results-decoration {
    /* 调整滤镜参数匹配你需要的颜色，以下示例可将默认图标改为红色 */
    filter: invert(17%) sepia(96%) saturate(7443%) hue-rotate(3deg) brightness(105%) contrast(116%);
  }
  

  你可以搜索css filter色值转换工具，输入目标色值就能直接得到对应的filter参数，调整非常方便。
• 方法2：隐藏默认图标，自定义带指定颜色的背景图
  代码示例：

  /* 隐藏默认搜索图标 */
  input[type="search"]::-webkit-search-results-decoration {
    display: none;
  }
  /* 给输入框添加自定义颜色的搜索图标作为背景 */
  input.border01 {
    /* 下面svg代码中fill属性的%23xxx就是色值，修改为你需要的颜色即可，示例为红色#ff0000 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 36px; /* 调整内边距避免输入文字覆盖图标 */
  }
  

方案2：全浏览器兼容方案 #

如果需要适配Firefox等非webkit内核浏览器，最稳妥的方式是先清除所有浏览器默认的search输入框特殊样式，再自行实现图标：

/* 清除search输入框的浏览器默认样式 */
input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* 隐藏webkit内核下的默认搜索、清除相关按钮 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

清除默认样式后，你可以在输入框外层套一个父容器，在父容器内插入独立的图标元素，直接设置图标的color或者fill属性即可，样式完全可控，不存在浏览器兼容问题。

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