1

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>

please see the output

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

Improve this question
2
  • color is not mention there i am talking about color change of close icon only no extra divs/icon/image required in my case. Commented Sep 23, 2019 at 23:58
  • i want default blue cross to be in red color threads which are mentioned are not helpful. Commented Sep 24, 2019 at 0:00

1 Answer 1

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.