更改 Bootstrap 删除 FormControl 中的文本 X 图标的颜色

Question

是否可以通过某种方式在 React 中更改此“x”的颜色？ 该元素是一个类型为“search”的 FormControl

 <div className="w-25 input-group my-2">
            <FormControl
              type="search"
              placeholder="Suchen"
              aria-label="Search"
              onChange={(e) => searchItem(e.target.value)}
            />
          </div>

Answer 1

不能改变X的颜色，但可以使用-webkit-search-cancel-button伪元素自定义。在下面的示例中，我使用 font-awsome 作为背景来自定义它，但您可以根据需要进行自定义。

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
}