Search code examples
reactjsbootstrap-4form-control

Change color of Bootstrap Delete Text X Icon in FormControl

Is it somehow possible to change the color of this "x" in React? The element is a FormControl with the type "search"

enter image description here

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

Solution

  • You can not change the color of X, but can use -webkit-search-cancel-button pseudo-element to customize it. in below example I've used font-awsome as background to customize it but you can do it by whatever you want.

    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%;
}