3

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.

Joe Sleiman
  • 2,416
  • 5
  • 25
  • 40
  • how are you handling placeholder change and clear-icon color by CSS? – Hrishikesh Kale Feb 14 '18 at 09:29
  • i tried this : page-search ion-content form .search-bar .searchbar-input-container .searchbar-clear-icon { color: white; } but i notice that the clear button is an image so i don't know how to change the color without change the image – Joe Sleiman Feb 14 '18 at 09:30
  • sorry, but I am not getting you, what you want to achieve in this? its a fact that you cannot change image color by CSS unless you change the image. – Hrishikesh Kale Feb 14 '18 at 09:36
  • i need to change the color of clear icon and the color of placeholder. – Joe Sleiman Feb 14 '18 at 09:38

3 Answers3

3

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;
      }

    }
Greg
  • 21,235
  • 17
  • 84
  • 107
Hrishikesh Kale
  • 6,140
  • 4
  • 18
  • 27
3

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)

Joe Sleiman
  • 2,416
  • 5
  • 25
  • 40
3

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;
   }
}
París
  • 63
  • 7