React中移除input搜索框右侧清除图标问题排查

问题根源 #

你写的CSS规则是用来移除**数字输入框（type="number"）**的上下箭头按钮的，和搜索输入框右侧的清除图标完全不相关，所以根本起不到作用。

搜索框的清除图标是浏览器自带的专属伪元素，不同浏览器对应的选择器不一样：

• Chrome、Edge、Safari这类WebKit内核浏览器：::-webkit-search-cancel-button
• Firefox：::-moz-search-cancel-button
• IE/旧版Edge：::-ms-clear

修复方案 #

修改你的global.css，替换掉原来的错误CSS规则，添加针对搜索框清除图标的样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* 移除WebKit内核浏览器的搜索清除图标 */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
  }

  /* 移除Firefox的搜索清除图标 */
  input[type="search"]::-moz-search-cancel-button {
    display: none;
  }

  /* 移除IE/旧版Edge的搜索清除图标 */
  input[type="search"]::-ms-clear {
    display: none;
  }

  html {
    @apply text-white;
  }
}

额外提示 #

• 不需要重复添加相同的CSS规则，把所有样式统一放在global.css的@layer base里就行，Tailwind会帮你处理优先级问题。
• 如果清除图标还是没消失，可能是其他CSS规则覆盖了当前样式，应急情况下可以给规则加上!important（不推荐长期使用）：

  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    display: none !important;
  }
  

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