Joe Sleiman
Joe Sleiman

Reputation: 2496

change placeholder and clear-icon color for ion-search bar not globally?

I have two ion-search bar, I need to change the placeholder and clear icon color for one of them only .

<ion-searchbar class="search-bar"
                placeholder="search"></ion-searchbar>

i need to change the placeholder and clear icon color specific for this ion-searchbar not globally so another ion-search bar will still have the default colors... anyone have any idea. thanks in advance.

Upvotes: 3

Views: 7509

Answers (3)

Par&#237;s
Par&#237;s

Reputation: 63

I realized that it is a background image and I replaced it with the icon of ionic, in my case material design (You can search de content property by searching in ionic css using icon name)

.searchbar-input-container {
   .searchbar-clear-icon {
      background-image: none;
   }

   .searchbar-clear-icon:before {
      font-family: "Ionicons";
      content: "\f2bf";
      color: blue;
   }
}

Upvotes: 3

Joe Sleiman
Joe Sleiman

Reputation: 2496

i found a solution only css:

 .searchbar-input-container{
          .searchbar-input{
            &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
              color: white;
            }
            &::-moz-placeholder { /* Firefox 19+ */
              color: white;
            }
            &:-ms-input-placeholder { /* IE 10+ */
              color: white;
            }
            &:-moz-placeholder { /* Firefox 18- */
              color: white;
            }
          }
          .searchbar-clear-icon{
            filter: invert(100);
          }

change the place holder color to white and filter invert(100) reflect the black to white (not the optimal solution but instead of changing the img url you can do that)

Upvotes: 3

Hrishikesh Kale
Hrishikesh Kale

Reputation: 6568

Here is one solution if you are handling this with css use [style] attribute and call a function which will return the exact class you want.

     @Component({
      selector: 'my-app',
      template: `
<ion-searchbar [style]="getStyle()" class="search-bar"
                placeholder="search"></ion-searchbar>
      `
    })
    export class App {

      getStyle() {
        // snip snip -> fetch the url from somewhere
        const profilePicUrl = 'some-remote-server-url.jpg';
        const style = `background-image: url(${profilePicUrl})`;
        return style;
      }

    }

Upvotes: 3

Related Questions