ionic 3 search bar style and search icon color change

Question

Now I have a search bar, but I want its border to be round, what should I do? I have tried border : round,border-radius:10px... and it did'nt work. I even want to change my search icon color and cancel icon color? Any ideas on how to achieve these things

Answer 1

for Ionic 4 for changing the icon color this works for me just fine

ion-searchbar {
 --icon-color: var(--ion-color-primary); 
}

for futur references you can check out the official docs https://ionicframework.com/docs/api/searchbar

Answer 2

I tried all of the above answers and none worked for me.

After some digging, I found something that might be useful to someone else looking to tweak the default styles of ion-searchbar (or any other ion element in general)

Below is the component.scss code for the ion-searchbar wthat I wished to change the styles for:

ion-searchbar{
    --icon-color: var (--ion-color-primary);
    --box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    ::ng-deep{
        .searchbar-input-container{            
            .searchbar-input{ 
                border-radius: 20px;
                //any style that you want to implement on your searchbar
            }
        }
    }   
}

Here, ::ng-deep disables view encapsulation for specific CSS rules, in other words, it gives you access to DOM elements, which are not in your component's HTML.

Answer 3

To change the icon color. In your "variables.scss" file in the "theme" folder add this line ;

$searchbar-md-input-search-icon-color:#yourColor;

To change the border-radius of the search bar, go to the SCSS file associate to your page containing your SEARCH BAR and put this

 ion-searchbar{        
    .searchbar-input-container{            
        .searchbar-input{
            border-radius: 20px;
        }
    }
 }

Answer 4

The following code changes the colour to white replacing the original greyish colour.

.searchbar .searchbar-search-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");
}

Try this to change the color of searchbar icon. Works for me. If you try to inspect the search bar icon it has a background image property which looks something like this

background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%235b5b5b'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");

Just Change the last 6 hex-digits in the fill='%235b5b5b' according to your color. Hope this helps.