Bootstrap 4 How to change input search with clear button color change using css

Question

There is default clear button appear using search input below is html block of code

<div class="input-group search-style ">
                <input id="Search" class="form-control  border-secondary py-2 " type="search" placeholder="search" style="border-right: none !important;">
                <div class="input-group-append">
                    <button class="btn removefocus" type="button" style="border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;">
                        <i class="fa fa-search "></i>
                    </button>
                </div>
            </div>

default color of clear button is blue. How can i change this color on my search input.

color is not mention there i am talking about color change of close icon only no extra divs/icon/image required in my case. — Feroz Siddiqui, Sep 23 '19 at 23:58
i want default blue cross to be in red color threads which are mentioned are not helpful. — Feroz Siddiqui, Sep 24 '19 at 00:00

score 4 · Accepted Answer · answered Sep 24 '19 at 00:35

4

The only way is to set the close icon's appearance to none, and use a background instead:

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background: some-image or svg;
}

https://jsfiddle.net/mLoeds3c/1/

answered Sep 24 '19 at 00:35

mulsun

563
5
15

Bootstrap 4 How to change input search with clear button color change using css

1 Answers1