How to set searchbar-clear-icon color?

Ionic Framework ionic-v3
1

Anyone knows how to change the searchbar-clear-icon color in Ionic2?

Seems to be defined as svg. Should I override this css and set background-image as none and use another one?

 .searchbar-clear-icon {
     background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><polygon%20fill='%235b5b5b'%20points='405,136.798%20375.202,107%20256,226.202%20136.798,107%20107,136.798%20226.202,256%20107,375.202%20136.798,405%20256,285.798%20375.202,405%20405,375.202%20285.798,256'/></svg>");
 position: absolute;
   top: 0;
   right: 13px;
   padding: 0;
   width: 22px;
   height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 22px;
   }
1 Like
2

Anyone? … up

3

It seems that there’s an open issue about this:

4

thx @iignatov, gonna follow that

5

seems something gonna be improved in beta12

1 Like
6

Hi
I need to remove the search bar border. Search bar by default showing the gray colour border. Please help me out how to remove the gray colour border?
PFA.image

7

If I remember correctly I did it with adding some css. To find the elements I needed to overwrite I used the chrome debugger.

8

could you please share the css ?

9

ok, gonna try to find it tomorrow

10

Try to play with (in your scss files)

ion-content ion-searchbar input.searchbar-input {
    background-color: red;
    border-color: red;
    color: white;
    box-shadow: none;
}

or

ion-searchbar.searchbar-ios {
    background-color: red;
}
2 Likes
11

great solution, thnks

12

I found that just accessing the tags to change the css didn't always work in Ionic2.

If you go to https://ionicframework.com/docs/theming/overriding-ionic-variables/, there is a rather lengthy list of variables that you can override. To change the color of a clear icon button in a searchbar, you would access for example: $searchbar-ios-input-clear-icon-color: #xxx; (-ios, -md, and -wp are all there) ...and you do this in src/theme/variables.scss .

Hope this helps!

13 
  .toolbar .searchbar-ios .searchbar-input {
      background: #fff;
  }
14

how can i remove searchbar margin i want to display it white, thank you

store%20search