Can't customize color of default search component

Question

I have an Ionic 3 app I'm working on where I have a search field. I'm trying to color it with a dark background and white text.

I have the following code, which works fine on the background, but the default icon and placeholder text are not turning white:

  .searchbar {
    background-color:#2f303e; 
    color:#fff;
      .searchbar-input {
        background-color:#2f303e; 
        color:#fff;
      }
  }

Here is the component:

  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

What am I missing?

score 1 · Accepted Answer · answered Apr 13 '18 at 07:54

Look at the documentation: https://ionicframework.com/docs/api/components/searchbar/Searchbar/ in Sass variable section there you have $searchbar-ios-input-search-icon-color and many more variables you need to declare them in theme/variables.scss simply add them and it will do.

Happy coding..:)

score 0 · Answer 2 · answered Apr 13 '18 at 08:18

The default search icon used is a svg (used as background image). It's color cannot be changed by using color: #fff;

Instead use the sass variables available for icon color:

ios: $searchbar-ios-input-search-icon-svg

android: $searchbar-md-input-search-icon-color

For placeholder color:

ios: $searchbar-md-input-placeholder-color

android: $searchbar-ios-input-placeholder-color

Can't customize color of default search component

2 Answers2